How to setup Semantic Release for a React app or a Next.js app

Overview

In this guide you'll learn how to setup Semantic Release for a React app or a Next.js app.

This will allow you to follow a workflow that performs fully automated releases for Github and enforces the Semantic Versioning specification based on your commit messages.

Here is an example from the official documentation of the release type that will be done based on commit messages:

Commit message	Release type
fix(pencil): stop graphite breaking when too much pressure applied	Patch Release
feat(pencil): add 'graphiteWidth' option	Minor Feature Release
perf(pencil): remove graphiteWidth option BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reasons.	Major Breaking Release

Tools such as commitizen or commitlint can be used to enforce valid commit messages.

You can use the commitizen extension to add commitizen support to Visual Studio Code.

Basic setup

First, create a Next.js app using Create Next App:

npx create-next-app semantic-release --example with-typescript --use-npm

Or if you prefer to use only React, use Create React App and run:

npx create-react-app semantic-release --template typescript --use-npm

Create a Github repository

https://github.com/new

In this example I called it: semantic-release

Link local repository to Github repository

git remote add origin [e-mail]:<username>/<repository-name>.git
git push -u origin master

Github token

A Github token must be created in order for Semantic Release to be able to publish a new release to the Github repository.

You can read here how to create a token for Github. You need to give the token repo scope permissions.

Once you have the token, you have to save it in your repository secrets config:

https://github.com/<username>/<repositoryname>/settings/secrets

Use GH_TOKEN as the secret name.

Install Semantic Release Git and Changelog plugins

npm install --save-dev @semantic-release/git @semantic-release/changelog

These plugins are necessary in order to create a Changelog and publish the new release in Github.

Add Semantic Release config to package.json

Add the following config to your package.json:

  "private": true,
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    "@semantic-release/github",
    "@semantic-release/npm",
    "@semantic-release/git"
  ],
  "release": {
    "prepare": [
      "@semantic-release/changelog",
      "@semantic-release/npm",
      {
        "path": "@semantic-release/git",
        "assets": [
          "package.json",
          "package-lock.json",
          "CHANGELOG.md"
        ],
        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
      }
    ]
  }

When you set the private property to true, it skips the publication to the NPM repository, which in this case we don't want to do.

Setup Github Actions

Github Actions will be used to create new releases of your app.

You must store workflows in the .github/workflows directory in the root of your repository. Once you created the directories, add a main.yml file inside with the following config:

name: Semantic release 

on:

  push:

    branches:

      - master

jobs:

  publish:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v2

      - name: Setup Node.js

        uses: actions/setup-node@v1

        with:

          node-version: 12

      - name: Install dependencies

        run: npm install 

      - name: Build app

        run: npm run build 

      - name: Semantic release

        env:

          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}

        run: npx semantic-release

Commit and push changes

Use the following commands:

git add .

git commit -m "feat: Add Semantic Release and Github Actions"

git push

Conclusion

Congratulations!

If you followed these steps, you should now have triggered Github Actions:

Also, if you check the release tab in your repository, you'll also see your first published release:

And finally, a Changelog file should have been automatically generated and published:

You can find the complete code for this guide in this github repository