How toAutomatically Publish to npm using GitHub Actions

Since I got access to the new GitHub Actions version I have waited to have a reason to use them and there was a workflow I always wanted to automate since it was too repetitive, publish to npm.

I have multiple packages in npm, like flagged or @contentz/build, that I wanted to automate the publish.

The Action

.github/workflows/publish.yml
name: Publish

on:
  release:
    types: [published]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - run: yarn install
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

This code is the GitHub Action I used, let's see what it does.

name: Publish

First we put a name to the action, this will be displayed in the checks of each PR or commit.

on:
  release:
    types: [published]

Then we configure when we want the action to run, in this case I'm saying on each release event when it's specifically a new release publish, the types: [published] is required here since releases could also be updated or deleted, we only want to publish to npm when a new release is created (published).

jobs:
  build:
    runs-on: ubuntu-latest

Then we create or job build and configure it to run on the latest version of Ubuntu.

steps:
  - uses: actions/checkout@v1
  - uses: actions/setup-node@v1
    with:
      node-version: 12
      registry-url: https://registry.npmjs.org/
  - run: yarn install
  - run: npm publish --access public
    env:
      NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

Now we need to configure the steps of the job, this is what it does:

• Get access to the repository files.
• Install Node.js, with the version 12 and using the registry URL of npm, this could be changed to a custom registry or the GitHub registry.
• Run the yarn install command to install the package dependencies.
• Run the npm publish command, the --access public force the package to be public even if the name is namespaced, this command is also run with the environment variable NODE_AUTH_TOKEN whose value is a secret configured in the repository called NPM_TOKEN.

The packages dependencies are installed because I configured a prepare script in the package.json of my package which runs the build of my module before publishing.

Configure the Secret

To configure the npm token secret go to https://github.com/$username/$repository/settings/secrets and click on Add a new secret.

Once you click that button GitHub will show you a form to write the name and the value of the secret.

In our case we used NPM_TOKEN as name, for the value let's go to https://www.npmjs.com/settings/$username/tokens to get a new token.

Click the Create New Token button in this page and you will navigate to a form.

In this form check the first option, read and publish and click on Create Token, this way your token will have access to publish as you.

Now you will get back to the list of tokens with your new token created and displayed to you, copy it and go back to GitHub and add it as value.

Once you have done that you will be able to add the secret and use it in your GitHub Actions.

Final Words

Now you can create a new Release on your package repository and get your package published on npm too without using any command yourself. You could even do it from your phone!