A complete guide to use dependabot with semantic-release and @vercel/ncc for GitHub Actions
Tags: semanticrelease, githubactions, dependabot
Published: 2021-07-16 12:05:34

---
title: A complete guide to use dependabot with semantic-release and @vercel/ncc for GitHub Actions
published: true
description: 
tags: semanticrelease, githubactions, dependabot
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csey7gg72o21f9rqgm7c.png
---

[Depandabot](https://dependabot.com/) is a really productive solution to keep our products secure and updated.

It is also easy to set up, however, it provides no chance to run a command in the PR, so we have additional considerations if we have some pre-release processes. For instance, for a GitHub Actions repository, we want to keep the `dist` directory updated by [`@vercel/ncc`](https://www.npmjs.com/package/@vercel/ncc) right after we update its dependencies.

This article introduces [semantic-release](https://semantic-release.gitbook.io/) as a solution. It automates the release process, and its [exec plugin](https://github.com/semantic-release/exec) helps us to run `@vercel/ncc` before the release automatically.

Overview of the development process is like below:

1. Dependabot creates a PR to update dependencies
2. GitHub Actions test the change, and reflect its result to GitHub Checks
3. Merge the PR manually or automatically
4. GitHub Actions run on the default branch, and trigger the semantic-release
5. semantic-release creates a Git tag, a GitHub Release, and a npm release

Check the following chapters for detail, or refer to [my GitHub repo](https://github.com/KengoTODA/actions-setup-docker-compose/tree/ce91d5b76f4c9910e6958b58396df65e8fdaebe0) as a working example.

## Install necessary node packages

Make sure you have a npm project in your working directory, and run the following command to install semantic-release and its plugins:

```sh
npm add -D semantic-release @semantic-release/exec @semantic-release/git 
```

## Configure npm to run `@vercel/ncc`

In `package.json`, confirm that we have a script to run `ncc` to optimize JS files like below:

```json
  "scripts": {
    "package": "ncc build --source-map"
  }
```

## Configure semantic-release

Follow the [official documents](https://semantic-release.gitbook.io/semantic-release/usage/configuration) to configure `semantic-release`.

In my case, it became like below to use the `main` branch as default branch, and run `exec` plugin and `git` plugin:

```json
  "release": {
    "branches": "main",
    "plugins": [
      "@semantic-release/commit-analyzer",
      "@semantic-release/release-notes-generator",
      "@semantic-release/npm",
      "@semantic-release/github",
      ["@semantic-release/exec", {
        "prepare": "npm run package"
      }],
      [
        "@semantic-release/git",
        {
          "assets": [
            "dist",
            "package.json",
            "package-lock.json"
          ],
          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
        }
      ]
    ]
  }
```

## Configure the dependabot to follow the Conventional Commit

Configure `.github/dependabot.yml` to enable dependabot. Make sure `commit-message` part is configured with `prefix: fix` to following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).

```yml
version: 2
updates:
  - package-ecosystem: npm
    directory: "/"
    schedule:
      interval: daily
    commit-message:
      prefix: fix
      prefix-development: chore
      include: scope
```

## (optional) Configure the auto-merge probot

To merge PRs made by dependabot automatic, you may introduce [probot-auto-merge](https://github.com/apps/probot-auto-merge). `.github/auto-merge.yml` will be like below:

```yml
minApprovals:
  NONE: 0
requiredLabels:
  - dependencies
updateBranch: true
mergeMethod: rebase
```

If we apply `NONE: 0` to `minApprovals` configuration to merge without manual review, make sure the [branch protection rule](https://docs.github.com/en/github/administering-a-repository/defining-the-mergeability-of-pull-requests/about-protected-branches) is created for the default branch, to make sure PRs will be merged only when [required status checks](https://docs.github.com/en/github/administering-a-repository/defining-the-mergeability-of-pull-requests/troubleshooting-required-status-checks) have passed.

There is no way to configure the branch protection rule by file, so you need to use GUI at github.com like below:

![screenshot of the branch protection rule GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbgsgwmhgn5y26m77fhl.png)

## Create a PAT (Personal Access Token)

semantic-release needs a GitHub token to push a commit. But when we have branch protection rules for the target branch, `secrets.GITHUB_TOKEN` provides not enough permission so you'll face an [error like below](https://github.com/KengoTODA/actions-setup-docker-compose/runs/3085079041?check_suite_focus=true#step:6:2121):

```
error: GH006: Protected branch update failed for refs/heads/main.
error: 2 of 2 required status checks are expected.
```

To avoid this error, [create a PAT](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token) and store it as an [encrypted secret](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository).

To keep our development environment secure, it's better to keep [PAT's scope](https://docs.github.com/en/developers/apps/building-oauth-apps/scopes-for-oauth-apps) minimal as much as possible. In my case, just a `public_repo` scope is enough.

## Configure GitHub Actions

We have a PAT so now we can configure GitHub Actions workflow!
It'll be like below:

```yml
      - uses: actions/checkout@v2
        with:
          # Make sure the release step uses its own credentials.
          persist-credentials: false
      - run: |
          npm ci
          npm run all
      - name: Run semantic-release
        # This process will run `ncc`, commit files, push a Git commit, and release to GitHub and npmjs.
        run: |
          npx semantic-release
        env:
          GITHUB_TOKEN: ${{ secrets.PAT_TO_PUSH }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
```

Or you may refer to [my workflow config](https://github.com/KengoTODA/actions-setup-docker-compose/blob/ce91d5b76f4c9910e6958b58396df65e8fdaebe0/.github/workflows/test.yml) as a working example.

Important points are as follows:

1. Run `actions/checkout` with `persist-credentials: false`, or [`git` plugin will use the GitHub token generated by `actions/checkout`](https://github.com/semantic-release/git/issues/196#issuecomment-601310576).
2. Set the PAT created at the previous chapter to `GITHUB_TOKEN` when we run `npx semantic-release`.

## Wrap up

Dependabot is really productive, even to GitHub Actions project that needs to keep the `dist` directory updated. semantic-release helps us not only by tagging but also by running commands to make the project ready to release.

There are several pitfalls around permission control, hope that this article helps you to avoid them. Enjoy hacking! :)