Automatically publish an update to NPM when you create a release in GitHub

In my last blog post, we created a workflow for reviewing Pull Requests. This is the final part of the series where we'll set up a workflow to automatically push updates to our package on NPM every time we create a new release in GitHub.

This workflow is used in the .github/workflows/publish.yml file of my library rex-state

GitHub Releases

Releases section allows us to tag individual commits with proper version numbers & a detailed changelog.

I use it as my source of truth for managing versions. Which means, every tag should be automatically published to GitHub.

Trigger

This workflow will run on release when the the type is published

name: publish
on:
  release:
    types: [published]

Jobs

This workflow has three jobs. First two are linting & testing to ensure the code is stable.

  lint:
    name: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - run: npx yarn typescript
      - run: npx yarn lint

  test:
    strategy:
      matrix:
        platform: [ubuntu-latest, macOS-latest]
        node: ['12.x']
    name: test/node ${{ matrix.node }}/${{ matrix.platform }}
    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: ${{ matrix.node }}
      - run: npx yarn bootstrap
      - run: npx yarn test

Once the above two jobs are over, we'll now use the JS-DevTools/npm-publish Action to publish an update to NPM.

You need to create an NPM Auth token and add it to your repository or organization secret under the name NPM_TOKEN

Then add the publish the job to your workflow ﹣

  publish:
    needs: [test, lint]
    name: Publish to npm 🚢📦
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - uses: actions/setup-node@master
        with:
          node-version: 12.x
      - run: npx yarn bootstrap
      - uses: JS-DevTools/npm-publish@v1
        with:
          token: ${{ secrets.NPM_TOKEN }}

Whenever you create a release in your repository from now onwards, you'll have an update published to your npm package.

This completes our React Native Library setup, you can use the setup + workflows you learnt in this 4 part series to publish both your React Native & React.js libraries.

I have been using it for both react-native-better-image which is for React Native & rex-state which works with both React.js & React Native.

In future, I'll be moving all my libraries in React Native Toolkit to this workflow which will help me maintain all my current 10+ libraries & some upcoming ones efficiently.

If this series helped you or you have any feedback feel free to post a comment or reach out to me on twitter. I'd be happy to help! :D