Let’s automate NPM package publishing with github actions

So you’ve got your shiny new NPM package all set up, or maybe you’re a seasoned pro with a bunch of packages under your belt already. But let’s face it, manually publishing each package to NPM can be a bit of a hassle, right? I mean, logging in with your NPM credentials every time and running npm publish can really slow things down.

But fear not, because we’ve got a solution that’ll make your life a whole lot easier! Imagine this: you’re working on a different computer in a pinch, and you’re not logged in to your NPM registry. No problem! Plus, wouldn’t it be neat if your package only got published when you release a new version on GitHub? Well, buckle up, because we’re about to make that happen!

With GitHub Actions, we can automate the entire publishing process for you. Once set up, every time you create a new release on GitHub, your NPM package will be automatically published like magic. How awesome is that?

So let’s dive in and streamline your workflow with GitHub Actions. Say goodbye to manual publishing and hello to automation! 🚀

Introducing github actions

GitHub Actions are like magic scripts that spring to life whenever something exciting happens on your GitHub repository. Picture this: you push a commit, merge a pull request, or unleash a shiny new release — and boom! Your actions kick in.

Github actions image

But wait, there’s more! You get to customize these actions to suit your needs. Want them to run on different operating systems? No problem. Prefer specific tools for the job? You got it. And guess what? You can even specify which branch they should keep an eye on and provide all the runtime info they need to work their magic. It’s like having your own team of automated helpers right at your fingertips! 🎩✨

Pre steps

Before diving into the GitHub Actions setup, let’s set up a few things to streamline the process. Here’s what you need to do:

1. Create an Access Token on NPM:
2. Head over to npmjs.com and log in to your account.
3. Click on your profile icon, then select Access Tokens.
4. Look for the Generate New Token button in the top right corner and give it a click.
5. Choose Classic Token if prompted.
6. If you have two-step authentication enabled, you might need to provide an OTP.
7. Now, give your token a name and select the type (choose Automation if you have two-step auth enabled).
8. Click on Generate Token.
9. Once generated, you’ll see a random string like npm_Gge2fam0Wes....zteiUNJpKUbYx9M2nfD1x. Copy this token - you won't be able to access it again, so keep it safe and sound.

With your access token in hand, you’re all set to automate your NPM package publishing with GitHub Actions! Let’s get to it! 🚀

Warm up github

Let’s warm up your GitHub repository for the automation ahead! Since our action script will be running on a remote system, it needs access to your NPM token. Here’s how to securely set it up:

1. Head to the GitHub repository where you want to enable this automation.
2. Once you’re in your repository, go to the Settings tab.
3. In the settings menu, look for the Secrets or Secrets and variables section.
4. Click on New repository secret or a similar button.
5. Give your secret a descriptive name, like NPM_TOKEN.
6. Now, paste the token you copied from NPM when you generated it earlier.
7. Hit Add secret to securely store it.

You are done! Your repository is now equipped with the secret sauce it needs for the automation magic to happen smoothly. Ready to rock and roll with GitHub Actions! 🌟

Github actions script

Let’s get your GitHub Actions script set up for automating NPM package publishing! Here’s what you need to do:

Create Folders and File:

1. In the root of your codebase, create a folder named .github.
2. Inside the .github folder, create another folder named workflows.
3. Finally, create a .yml file inside the workflows folder. Let's name it npm_publish.yml.
4. Copy and paste the following code into your npm_publish.yml file:

name: NPM Publish
on:
  release:
    types: [published]

jobs:
  publish:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://registry.npmjs.org'

      - name: Install dependencies by npm
        run: npm install

      - name: Run typescript to compile
        run: tsc

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

Explanation of the Script:

1. name: This is the name of your GitHub Action workflow, which you'll see in the Actions tab of your repository.
2. on: Specifies the event that triggers the workflow. In this case, it runs when a new release is published.
3. jobs: Defines the jobs that will be executed as part of this workflow.
4. publish: The name of the job.
5. runs on: Specifies the operating system for the job. Here, it's set to run on the latest version of Ubuntu.
6. steps: Defines the individual steps that make up the job.
7. uses: This step checks out your repository code.
8. name: Each step has a name for better readability in the Actions logs.
9. actions/setup-node: Sets up Node.js with the specified version and registry URL.
10. run: Executes the specified command. In this case, it installs npm dependencies, compiles TypeScript, and publishes the package to NPM.
11. env: Sets environment variables. Here, it sets the NODE_AUTH_TOKEN variable to the secret value stored in GitHub Secrets, which allows npm to authenticate during publishing.

That’s it! Your GitHub Actions script is all set up to automate the publishing of your NPM packages whenever you make a new release. 🎉

Test the action

Now push all to github and create a new release. After that you should be able to see something going on to the Actions tab in your repository. If everything works fine you would see your package right in the npm registry.