Effortless Automation: Configuring CI/CD for NPM Library Publishing with GitHub Actions

Day 013 - 100DaysAWSIaCDevopsChallenge

Recently, I developed an npm package for JavaScript and TypeScript projects. Initially, I manually handled the publishing process, which involved testing, compiling, and publishing the library using various npm commands. This approach was time-consuming, required significant effort, and left little room for error—I had to remember the exact sequence of commands and their specific options. Recognizing the inefficiency, I decided to automate the publishing process.

In this article, I’ll walk you through the steps I took to automate the process and streamline my workflow.

By the end, you’ll have a clear understanding of how to efficiently automate your npm package publishing with GitHub Actions. The process will involve the following steps:

1. Create a GitHub Workflow to automate Linting, building, and Testing process for every push events - We'll start by setting up a GitHub Actions workflow that automatically runs linting, builds your project, and executes tests each time code is pushed to the repository. This ensures that any issues are caught early in the development process, maintaining the integrity of your code source.




2. Create the second Workflow to automate the Release creation and Publishing proccess for every tag push events - Next, we’ll create a dedicated workflow to handle the release process. This workflow will trigger when a new tag is pushed, automatically compiling the code, updating version numbers, and publishing the package to npm. This step removes the manual intervention from the release cycle, making it more efficient and less prone to errors.




3. Configure Github Actions (Setting up NPM Access Tokens) - To enable GitHub Actions to publish your package to npm, we’ll configure the necessary secrets within your repository. This involves generating an npm access token and securely storing it in your GitHub repository settings, allowing for seamless and secure automated publishing.




4. Update README.md by adding the build badges status - Finally, we’ll update your project’s README.md file to include build status badges. These badges provide instant visual feedback on the status of your project’s workflows, showing whether your builds are passing, if tests are successful, and the overall health of your code source.

Flow diagram

whenever certain conditions are met (like a push event). It runs on multiple Node.js versions (strategy.matrix.node-version: [ 18.x, 20.x, 22.x ]) to ensure compatibility and helps maintain code quality by catching issues early.

2. Add the Token to Github Secrets

1. Click on the Settings tab in your repository.


2. In the left sidebar, select Secrets and variables and then Actions.


3. Click New repository secret
   


4. 
   Name the secret NPM_TOKEN and paste the npm access token you copied earlier into the Value field.

1. Create and Merge a Pull Request




2. Create and Push a New Tag
   
   

git checkout master # Switch to your default branch

npm version patch # this command update package.json and package-lock.json, commit the changes and then, create a new tag locally.

# output : v1.0.1 - or a different version number based on your package.json

git push origin v1.0.1 # Push the new tag to the remote repository

This will create new release and publish a new version to npmjs.com.

NPM Package ==>