Publish to NPM using GitHub Actions

I recently needed to find a way to publish packages to NPM automatically and since all my projects are hosted on GitHub I thought why not using GitHub actions? In this article I explain how to do that in 3 simple steps!

?? Pssst… you can also check …


This content originally appeared on DEV Community and was authored by Andrea Stagi

I recently needed to find a way to publish packages to NPM automatically and since all my projects are hosted on GitHub I thought why not using GitHub actions? In this article I explain how to do that in 3 simple steps!

?? Pssst... you can also check some real life examples:

Generate a new token on NPM

First of all you need to create a new NPM token that will be used to publish packages to NPM.

From NPM dashboard open main menu and select "Access token", then click on "Generate new token"

image

select "Automation" token to bypass two-factor authentication when publishing

image

then copy your token, it will be used as a GitHub secret as explained in the next section

image

Store your token as a GitHub secret

GitHub Actions can access your GitHub secrets, so that's the perfect place where to store your token!

Under "Settings" -> "Secrets" click on "New repository secret" and add your NPM Token your previously copied (in this example I use NPM_TOKEN label to identify it)

image

Now it's time to write some code and create a new action to publish your package!

Write your action

Create a new GitHub Action publish.yml inside your project under .github/workflows.

name: Publish to NPM
on:
  release:
    types: [created]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14.x'
          registry-url: 'https://registry.npmjs.org'
      - name: Install dependencies and build ?
        run: npm install && npm run build
      - name: Publish package on NPM ?
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

This action should run only when you create a new release on GitHub

on:
  release:
    types: [created]

The steps it executes are really clear:

  • Checkout code
  • Setup Node.js environment (using Node.js 14.x here)
  • Install dependencies and build your package (if needed)
  • Publish to NPM! As you can see this step uses our NPM_TOKEN secret to initialize NODE_AUTH_TOKEN env variable
      - name: Publish package to NPM ?
        run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Create a new release

In order to see your action running, you need to create a new release on GitHub.

image

After that your package will be successfully published to NPM ?


This content originally appeared on DEV Community and was authored by Andrea Stagi


Print Share Comment Cite Upload Translate Updates
APA

Andrea Stagi | Sciencx (2021-08-25T16:06:51+00:00) Publish to NPM using GitHub Actions. Retrieved from https://www.scien.cx/2021/08/25/publish-to-npm-using-github-actions/

MLA
" » Publish to NPM using GitHub Actions." Andrea Stagi | Sciencx - Wednesday August 25, 2021, https://www.scien.cx/2021/08/25/publish-to-npm-using-github-actions/
HARVARD
Andrea Stagi | Sciencx Wednesday August 25, 2021 » Publish to NPM using GitHub Actions., viewed ,<https://www.scien.cx/2021/08/25/publish-to-npm-using-github-actions/>
VANCOUVER
Andrea Stagi | Sciencx - » Publish to NPM using GitHub Actions. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/25/publish-to-npm-using-github-actions/
CHICAGO
" » Publish to NPM using GitHub Actions." Andrea Stagi | Sciencx - Accessed . https://www.scien.cx/2021/08/25/publish-to-npm-using-github-actions/
IEEE
" » Publish to NPM using GitHub Actions." Andrea Stagi | Sciencx [Online]. Available: https://www.scien.cx/2021/08/25/publish-to-npm-using-github-actions/. [Accessed: ]
rf:citation
» Publish to NPM using GitHub Actions | Andrea Stagi | Sciencx | https://www.scien.cx/2021/08/25/publish-to-npm-using-github-actions/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.