Connect your Github repo to NPM for package deployments

Most important... 🧐

You should have already a library to publish to npm, if not, you can follow my previous tutorial, it will have you ready for this post 😀

The NPM fun: first publish 👨‍💻

Now we are ready for the NPM fun, add these two scripts to your root package.json:

"build-lib": "ng build custom-ui",
"publish-lib": "npm run build-lib && npm login && npm publish ./dist/custom-ui --access public",

Also, make sure to add these lines to the library's package.json:

"name": "@gblp/custom-ui", <--- make sure you include your npm username
...
"repository": {
    "type": "git",
    "url": "git+https://github.com/elparaquecosadeque/npm-test.git"
  },
  "publishConfig": {
    "access": "public"
  }

After doing so, run this in your terminal:

npm run publish-lib

And your terminal should prompt you for login to npm and then publish

There is our package is already published to NPM:

Let's automate through Github Actions 🐙

Create a .github/workflows directory in your root, and then a publish.yml resembling below:

name: Publish npm package

on:
  workflow_dispatch:

permissions:
  contents: read
  id-token: write

jobs:
  publish:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v5

      - uses: actions/setup-node@v5
        with:
          node-version: 24
          cache: npm
          registry-url: https://registry.npmjs.org

      - run: npm ci --ignore-scripts
      - run: npm run build:lib
      - run: npm publish ./dist/custom-ui --access public --provenance

Push it and let's go to npm interface. There click on Settings > in Trusted Publisher, enable GitHub Actions:

This will ask you in the form for some details you are good to fill out:

Finish with Setup connection button and you're done here:

Github side: trigger NPM publish 🚀

In your repo, go to Actions > Under Actions, "Publish npm package" > Run workflow

As we have defined the trigger workflow_dispatch this means the trigger is manual, let's give it the first go by click on "Run workflow"

Beware: Version conflict 🚀

If you followed to the letter, you must have come across the error below:

This is quite expressive: NPM cannot publish over previous versions. Let's quickly fix by adding to our projects/custom-ui/package.json:

  "version": "0.0.2",

With that, let's try again:

And now lovingly crafted 💓, we see it mirrored in your NPM profile:

Achievements 🎉🙌

• Created your first NPM package for reusability in your multiple projects
• Integrated CI/CD for your repo
• Revisit the repo to verify if you missed something: https://github.com/elparaquecosadeque/npm-test