Publishing a NPM Package Automatically with GitHub Actions

#automation #github #javascript #tutorial

That's one is mostly for my future reference, but I hope it’s useful to others too. It’s interesting how different this feels compared to when I started this writing journey three years ago. Today, I can easily search my ChatGPT chat history for solutions. Still, I sometimes feel that relying too much on AI makes me lazier and less focused. Writing forces me to focus, something social media endless scrolling and asking AI can take away.

Before this turns into a philosophical discussion on whether AI will take our jobs, I’ll stick to documenting how I publish an NPM package automatically using GitHub Actions.

Even though AI can now generate .yml workflows almost instantly, I still find writing them myself worthwhile because:

It helps me internalize the knowledge
Understanding what you’re doing is essential, relying blindly on generated code doesn’t help long-term.

Step 1 – Have a Package to Publish

You need a valid Node.js package to publish to NPM. If you don’t have one yet:

Create a package.json with npm init (or npm init -y to skip prompts).
Add your source code and tests.
Make sure your package has a unique name on NPM

For this example, I’m using a QR Code generator I built. It uses Reed-Solomon error correction codes and was a fun exercise to practice logic. The package is usable already, though I’m still not quite happy with that, so I am refining some logic.

Step 2 – Set Up Your NPM Account and Token

To publish packages automatically, you need:

An NPM account
An access token with publish permissions.

Store the token as a GitHub secret at the package repository you want to publis so the workflow we gonna build can access it securely.

Step 3 – Publish Your Package Locally

Before automating, make sure you can publish manually:

npm publish

This ensures your package configuration is correct, dependencies are installed, and there are no errors. You likely gonna be prompet to log at NPM by running this for the very first time.

Step 4 – Automate Publishing with GitHub Actions

Here’s a workflow that automatically generates a GitHub release and publishes to NPM whenever you push a tag.

name: Generate Release and Publish to NPM

on:
  push:
    tags:
      - '*'

jobs:
  build-and-release:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      # Get Tag Name
      - name: Get Tag name
        id: vars
        run: echo "TAG_NAME=${GITHUB_REF_NAME}" >> $GITHUB_ENV

      # Generate GitHub Release
      - name: Create GitHub Release
        uses: softprops/action-gh-release@v2
        with:
          files: ${{ env.ZIP_NAME }}
          body: |
            **QR Code Pack – Version ${{ github.ref_name }}**

            For detailed changes in this version, see the automatically generated notes.
          generate_release_notes: true
          make_latest: "true"
        env:
          GITHUB_TOKEN: ${{ secrets.GH_PAT }}

      # Publish to NPM
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: https://registry.npmjs.org/

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