“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Recently I encountered a situation where I didn’t have my own developer and needed to develop an NPM package, so I tried to use Github Codespaces to develop it. This article records the development process.

Related introduction:

Github codespaces

Codespace is a github cloud development environment that provides a developer and web editor that allows you to develop projects using only a browser. There have been many such products before, but this one is official. Businesses currently pay for access, while individuals who signed up for the private beta will now be able to use it for free.

Github actions

Github Actions Github actions is a CI/CD tool that we can use to automate the release of NPM packages.

Process:

Requirements:

The requirement I have encountered is that I need to use SharedArrayBuffer on web pages. This API should run in cross-origin-Isolation environment. Therefore, I need a middleware to add headers for cross-origin-opener -Policy and cross-origin-embedder-policy.

Create a warehouse:

You can create a LICENSE for your project directly on Github. In this case, I chose MIT.

Create a new coDESPace: create a new codespace:

This is a web version of vscode, you can synchronize vscode configuration and plug-ins, most of the plug-ins work in the web version, the development experience is very good:

Initialize NPM project:

Terminal is available in codespace, so here, just as locally, you can execute the command:

npm init
Copy the code

Here, the description and keywords fields in package.json should be written in more detail to facilitate NPM search.

Add the README:

The purpose of the README is to describe the role of the repository and to be used as an NPM usage document, so the basic requirement of the README is to have a package usage method.

To improve the universality of readMe in English, you can add multilingual readme if necessary.

Development:

Because it’s just middleware that adds headers, the functionality is very simple, so it’s written directly in JS

'use strict';

/**
 * isolated middleware
 * 
 * @return {Function} isolated middleware
 * @api public
 */
module.exports = function() {
  return function isolated(ctx, next) {
    ctx.set('Cross-Origin-Opener-Policy', 'same-origin');
    ctx.set('Cross-Origin-Embedder-Policy', 'require-corp');
    next();
  };
};
Copy the code

Testing:

As a generic NPM package, test cases are essential. Since this package is an HTTP service middleware, we write network request tests with the help of the Supertest tool:

'use strict'; const assert = require('assert'); const Koa = require('koa'); const request = require('supertest'); const isolated = require('.. / '); describe('isolated.test.js', function () { const app = new Koa(); app.use(isolated()); app.use(function (ctx) { ctx.body = { foo: 'bar' }; }); it('should has the header `Cross-Origin-Opener-Policy` valued `same-origin` and `Cross-Origin-Embedder-Policy` valued `require-corp`', function (done) { request(app.listen()) .get('/') .expect('Cross-Origin-Opener-Policy', 'same-origin') .expect('Cross-Origin-Embedder-Policy', 'require-corp') .expect({ foo: 'bar' }) .expect(200, done); }); });Copy the code

Create the action:

Create the.github/workflows directory under your project. You can add your own actions below. Action is a.yml file. Here we create an action to automatically publish the NPM package.

To publish to NPM, you need to provide an NPM_TOKEN. To create an Access Token, log in to www.npmjs.com/ and select Automation for automatic publishing.

Token information is a personal information certificate and cannot be hard-coded into the action file. Here you can use github’s Actions secrets function. In the Secrets option under Settings, create a secret variable. Read in the action code by the variable ${{secrets.npm_access_token}}.

Here is the action code for my project. The name field for each step describes the purpose:

name: npm publish on: push: branches: [ main ] jobs: publish-npm: runs-on: ubuntu-latest strategy: matrix: node-version: [ 12.x ] steps: - name: checkout main uses: actions/checkout@main - name: setup Node.js uses: actions/setup-node@master with: node-version: ${{ matrix.node-version }} - name: version id: version uses: Ashley-taylor /[email protected] with: path:./package.json Property: version-name: publish to NPM run: | npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN npm publish env: NPM_TOKEN: ${{secrets.NPM_ACCESS_TOKEN}} - name: create GitHub Release id: create_release uses: actions/create-release@latest env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: v${{steps.version.outputs.value}} release_name: v${{steps.version.outputs.value}} draft: false prerelease: falseCopy the code

Push the code:

Add && commit && push. Since we set the trigger of action before, the code push will automatically execute the actions process. You can check the execution status in the Actions page:

Here you can see that it has been successfully published to NPM, and you can search for the newly released package on the NPM website:

complete

So far, I have only published the NPM package in the browser, which is very convenient without a development environment, so you can try it out. Finally, attach two NPM package addresses (one koA version and one Express/Connect version) :

www.npmjs.com/package/koa…

www.npmjs.com/package/iso…

This can be installed if you encounter SharedArrayBuffer or any other API that requires a cross-Origin-Isolation environment (which is not required in most scenarios).