DEV Community

loading...
Cover image for Automating package publishing to NPM

Automating package publishing to NPM

harshzalavadiya profile image Harsh Zalavadiya ・3 min read

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 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

Create New Token Button

Copy newly created token

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

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

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

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

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

Successful Build

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

Creating a release

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

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

Additional Resources / Info

GitHub logo harshzalavadiya / random-fastfood

A tiny package demonstrating automated NPM package publishing using GitHub Actions

Real react package using this workflow

GitHub logo harshzalavadiya / react-multi-select-component

Lightweight (~4KB gzipped) multiple selection dropdown component


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

Cover Photo by Paul Esch-Laurent on Unsplash

Discussion

pic
Editor guide