DEV Community

loading...

Automatically Publish to npm using GitHub Actions

sergiodxa profile image Sergio Daniel Xalambrí Originally published at sergiodxa.com Updated on ・3 min read

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

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}}
Enter fullscreen mode Exit fullscreen mode

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

name: Publish
Enter fullscreen mode Exit fullscreen mode

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

on:
  release:
    types: [published]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode

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.

GitHub settings to configure the secrets with two secrets already configured

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

GitHub form to create a new 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.

npm settings page on the token sections

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

npm form to create a new token with the read and publish option checked

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.

npm results page after creating a new token with the token hidden behind a yellow rectangle

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!

Discussion (2)

pic
Editor guide
Collapse
negue profile image
negue

Awesome! I wanted to do add this in my project already, but never knew where to start. Now I atleast know how it would work with GitHub actions haha :).

Btw, does it also work with the access tokens if my npm account has 2FA active?

Collapse
sergiodxa profile image
Sergio Daniel Xalambrí Author

I had to disable 2FA and reenable it only for login, it was the only way I found to automate the publish, I'm pretty sure there should be a way to automate it with 2FA tho.