Automatically publish an update to NPM when you create a release in GitHub
Tags: react, reactnative, actionshackathon, github
Published: 2020-09-16 10:22:27

In my [last blog post](https://dev.to/dani_akash_/automating-the-review-process-of-your-react-native-library-s-prs-4457), 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](https://github.com/react-native-toolkit/rex-state/blob/master/.github/workflows/publish.yml) file of my library [rex-state](https://github.com/react-native-toolkit/rex-state/)

## GitHub Releases
[Releases](https://github.com/react-native-toolkit/rex-state/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`
```yml
name: publish
on:
  release:
    types: [published]
```
## Jobs
This workflow has three jobs. First two are **linting** & **testing** to ensure the code is stable.
```yml
  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](https://github.com/JS-DevTools/npm-publish) Action to publish an update to NPM.

You need to create an [NPM Auth token](https://docs.npmjs.com/creating-and-viewing-authentication-tokens) and add it to your repository or organization secret under the name `NPM_TOKEN`

Then add the publish the job to your workflow ﹣
```yml
  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](https://github.com/react-native-toolkit/react-native-better-image/) which is for React Native & [rex-state](https://github.com/react-native-toolkit/rex-state) which works with both React.js & React Native.

In future, I'll be moving all my libraries in [React Native Toolkit](https://github.com/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](https://twitter.com/dani_akash_). I'd be happy to help! :D