Publish to NPM using GitHub Actions
Tags: node, github
Published: 2021-08-25 16:06:51

I recently needed to find a way to publish packages to NPM automatically and since all my projects are hosted on GitHub I thought why not using GitHub actions? In this article I explain how to do that in 3 simple steps!

👉🏻 Pssst... you can also check some real life examples:

- [Oruga UI](https://github.com/oruga-ui/oruga)
- [DCC-Utils](https://github.com/ministero-salute/dcc-utils)

## Generate a new token on NPM

First of all you need to create a new NPM token that will be used to publish packages to NPM.

From NPM dashboard open main menu and select "Access token", then click on "Generate new token"

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kd3phl8qnlt7u12hn55.png)
 
select "Automation" token to bypass two-factor authentication when publishing

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84caxmk7f7fn8dc7jj8k.png)
 
then copy your token, it will be used as a [GitHub secret](https://docs.github.com/en/actions/reference/encrypted-secrets) as explained in the next section

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvq0dblsbi40w8b4i69n.png)
 

## Store your token as a GitHub secret

GitHub Actions can access your GitHub secrets, so that's the perfect place where to store your token! 

Under "Settings" -> "Secrets" click on "New repository secret" and add your NPM Token your previously copied (in this example I use `NPM_TOKEN` label to identify it)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fn55nojstxu272gceq04.png)
 
Now it's time to write some code and create a new action to publish your package!

## Write your action

Create a new GitHub Action `publish.yml` inside your project under `.github/workflows`.

```yaml
name: Publish to NPM
on:
  release:
    types: [created]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14.x'
          registry-url: 'https://registry.npmjs.org'
      - name: Install dependencies and build 🔧
        run: npm ci && npm run build
      - name: Publish package on NPM 📦
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

This action should run only when you create a new release on GitHub

```yaml
on:
  release:
    types: [created]
```

The steps it executes are really clear:

- Checkout code
- Setup Node.js environment (using Node.js 14.x here) 
- Install dependencies and build your package (if needed)
- Publish to NPM! As you can see this step uses our `NPM_TOKEN` secret to initialize `NODE_AUTH_TOKEN` env variable

```yaml
      - name: Publish package to NPM 📦
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

## Create a new release

In order to see your action running, you need to [create a new release on GitHub](https://docs.github.com/en/github/administering-a-repository/releasing-projects-on-github/managing-releases-in-a-repository).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjtkj6lxke8erg7yqopi.png)
  
After that your package will be successfully published to NPM 🎉