Publish your npm packages automatically with Auto and Github Action
Tags: frontend, packages, githubactions, ci
Published: 2020-07-23 19:40:02

---
title: Publish your npm packages automatically with Auto and Github Action
published: true
description: 
tags: frontend, packages, githubactions, ci
---

If you have your own npm package you make updates to regularly and use in multiple projects, publishing can take time and testing new release can be annoying.

[Auto](https://intuit.github.io/auto/) is a tool that allows you to streamline your release process, using labels on your Pull request to know what version to publish, following semantic versioning. Oh, and the cherry on the cake, it generates release notes and CHANGELOG automatically too!

My team has been using for months now, and we love it! Getting a newly published version just from merging a Pull Request saved so much time.

## What does Auto does?

We use `auto` command `shipit` to handle multiple scenarios automatically:

- **If it's called from the base branch or main branch (like `master`) ⇒ A new version of the package is released:**

This is the basic feature which will get you a new npm package version.

- **If it's called from a Pull Request in CI ⇒ a canary version is released**: A canary release is like a preview of your package once it's published, like a temporary package version. This is very handy to test your work on a project using your repo and have that repo pass it's own CI requirements or provide testing links to testers.
- **If called from a pre-release branch (like `next`) ⇒ A pre-release version will be released:**

This is great to create a beta version of your next big update and test them on projects which are using your package.

There are more features you check out on their documentation, but this covers most cases you will need.

## Setup

Auto has good documentation available [here](https://intuit.github.io/auto/docs/welcome/getting-started) on how to get you started.

Here is what I had to do to be able to run it via GitHub Actions:

- Run `npm install --save-dev auto`
- Create `.autorc` to add the user info to use with git

```objectivec
{
  "author": {
    "name": "FirtName LastName",
    "email": "youremail@gmail.com"
  }
}
```

There is a lot more you can configure via `.autorc`, have a look at the doc [here](https://intuit.github.io/auto/docs/configuration/autorc).

- Create tokens

To run auto, you need an npm token and a GitHub token. GitHub action provides a token automatically via `secrets.GITHUB_TOKEN`. You will need to create an npm token with read and publish access level and saved it in your repo secrets as `NPM_TOKEN`.

- Create labels

The main thing you will need to do is to create the labels on your repo via the auto command. You will need to this from your project locally.

1. Follow these instructions to create a GitHub token. You will need to give it repo permissions.
2. Once you have your token, run `GH_TOKEN={YOUR_TOKEN} auto create-labels` from the root of your project.
3. Once done, you can delete the GitHub token if you have no use for it.

## GitHub Action setup

Create a new workflow file `.github/workflows/auto-publish.yml`

```objectivec
name: Auto publish and create release
on:
  push:
    branches:
      - master
			- next
  pull_request:
    branches:
      - master
jobs:
  autorelease:
    runs-on: ubuntu-latest
    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - run: git fetch --unshallow --tags
      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
          registry-url: 'https://registry.npmjs.org'
      - name: Auto release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: |
          npm ci
          npx auto shipit
```

**Note**:

- Creating new releases on merging pull request to master
- Creating pre releases on merging pull request to next

```objectivec
on:
  push:
    branches:
      - master
			- next
```

- Create canary release when a PR is created against master

```objectivec
on:
 pull_request:
    branches:
      - master
```

- Do not run auto when it makes changes to CHANGELOG to not get stuck in a release loop.

```objectivec
if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
```

- Handle installing private package if you have any

```objectivec
 - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
          registry-url: 'https://registry.npmjs.org'
```

and

```objectivec
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
```

Enjoy your new release process 🚀

PS: The documentation also have an example for GitHub action: [https://intuit.github.io/auto/docs/build-platforms/github-actions](https://intuit.github.io/auto/docs/build-platforms/github-actions)