Automating package publishing to NPM
Tags: actionshackathon, github, actions, opensource
Published: 2020-08-14 11:01:44

---
title: Automating package publishing to NPM
published: true
description: Automate publishing of NPM package to the registry when you create a release on GitHub
tags: actionshackathon, GitHub, Actions, OSS
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/snj7t4v0el8bq7fifmgz.jpg
---

It's easy to publish a package to NPM directly by running `npm publish` however in real-world scenario you might want to automate this so you don't have to worry about maintaining NPM access for everyone especially in a corporate environment

### My Workflow

1. You create a release on GitHub
2. **GitHub Actions** will trigger a build
3. package will be published if the build is successful

So to automate this in a more secure and automated manner you can follow below steps

### Submission Category: 
Maintainer Must-Haves

#### 1. Prepare your code

The first step is to push your code to GitHub repository if not already

In this demo, I'm going to use [this repository](https://github.com/harshzalavadiya/random-fastfood) that has a very tiny package that will return random fast food name when called

#### 2. generating and setting up auth token

Since we can't directly login to NPM registry when performing automated release we have to generate an auth token to do that follow below steps

![Generating NPM Auth token](https://dev-to-uploads.s3.amazonaws.com/i/k73nerl8vhtq5k8iddar.png)

![Create New Token Button](https://dev-to-uploads.s3.amazonaws.com/i/ie9htc28fq1v52j1gc6e.jpg)

![Copy newly created token](https://dev-to-uploads.s3.amazonaws.com/i/ht9ok5txu6vnl6dlwkae.png)

Now once we have a token ready we can create a secret in GitHub repository so  action can access this token securely

![Going to New Secret](https://dev-to-uploads.s3.amazonaws.com/i/5p2tuwaae06eaen3u4np.png)

after clicking on *New Secret* you can create a secret like below this will be available to build system on build time

![Adding a new secret](https://dev-to-uploads.s3.amazonaws.com/i/lv4lpapvpb5mvq4y9lf8.png)

#### 3. Creating a build configuration file

To tell GitHub actions GitHub repository has a special folder called `.github/workflows` on repository root where GitHub will look for build instructions so we will create a file called `main.yml` with below-given contents

### Yaml File or Link to Code

```yml
name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Begin CI...
        uses: actions/checkout@v2

      - name: Use Node 12
        uses: actions/setup-node@v1
        with:
          node-version: 12.x

      - name: Use cached node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            nodeModules-

      - name: Install dependencies
        run: yarn install --frozen-lockfile
        env:
          CI: true

      - name: Build
        run: yarn build
        env:
          CI: true

      - name: Publish
        if: startsWith(github.ref, 'refs/tags/')
        run: echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc && npm publish --access public
        env:
          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
```

once you commit this file in your GitHub repository it will run a build each time you push your code. once you do this you should be able to see little orange dot to your commit indicating Actions is running your build ✨

![Actions building orange dot](https://dev-to-uploads.s3.amazonaws.com/i/qdte6bciv3zui9kjv6pz.png)

once finished it will show green checkmark indicating that build was a success like below

![Successful Build](https://dev-to-uploads.s3.amazonaws.com/i/801stbixdxxk41bk99ni.png)

but we don't want to publish to happen every time we commit, the above workflow is designed to not to perform publish unless you create a release

So now to publish package we are going to create a release on GitHub

![Click on publish release](https://dev-to-uploads.s3.amazonaws.com/i/z6whe7euyut2amx26459.png)

![Creating a release](https://dev-to-uploads.s3.amazonaws.com/i/cf2b26neczzucn5t0p31.png)

once done GitHub Actions will trigger a new build and if workflow is successful then you should be able to see package published to NPM Registry

![Published package](https://dev-to-uploads.s3.amazonaws.com/i/a460v99ieg5sk505rmvv.png)

🎉 Congratulations, you have successfully automated your NPM package publishing 🎊

### Additional Resources / Info

{% github harshzalavadiya/random-fastfood no-readme %}

### Real react package using this workflow
{% github harshzalavadiya/react-multi-select-component no-readme %}

---

This is my first post on DEV, so suggestions are always welcome 😁

Cover Photo by [Paul Esch-Laurent](https://unsplash.com/@pinjasaur?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/javascript?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)