How to setup Semantic Release with GitHub Actions.

#todayilearned #cicd #githubactions #tutorial

Recently, My coworker is using Nx to automate his workflow, including automated release using semantic version. I found this method quite useful, so I want to re-implement on single GitHub repositories (without Nx).

First Step: Create GitHub's Personal Access Token

You can follow this link on how to create Personal Access Token.
You can choose Fine-grained tokens as you can scope specific repositories. (Or Token (Classic))

Make sure that you grant repository permission to token. For my configuration I use:

Read Access

variables
environments
metadata (default)
secrets

Read/Write Access

code
commit statuses
issue
pull requests
workflows

I might grant unnecessary permission, so feel free to correct me.

Second Step: Setup GitHub token in repository's environment

1.Go to Settings options

2.Select Environments

3.Create Environment

4.Create Environment Secret

I use GH_TOKEN to represent GITHUB_TOKEN (GitHub does not allow naming variables with prefix "GITHUB").

Third Step: Setup workflows

I use this package -> Action for Semantic Release to setup my workflow.
Use this script to create workflow



name: test
on:
  push:
    branches:
      # Change this if your primary branch is not main
      - master
      - dev

jobs:
  main:
    runs-on: ubuntu-latest
    environment:
      name: Semver #your environment name
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          persist-credentials: false
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v4
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}

In this code snippets, it's meant to

setup environment
perform semantic release

Fourth Step: Create `.releaserc`

This will be semantic-release configuration file for

create release tag
create change log
define commit message convention -> conventionalcommits

Create .releaserc in your project.



{

    "branches": [

        "master",

        "dev"

    ],

    "plugins": [

        "@semantic-release/commit-analyzer",

        "@semantic-release/release-notes-generator",

        [

            "@semantic-release/changelog",

            {

                "changelogFile": "CHANGELOG.md"

            }

        ],

        [

            "@semantic-release/git",

            {

                "assets": [

                    "CHANGELOG.md"

                ]

            }

        ],

        "@semantic-release/github"

<span class="pi">]</span>



    

    




}

Final Step: Add, Commit and Push

This step will be the byproduct of your work so far.

Once you commit your code with message convention, for example, feat: add some features, it will trigger the semantic-release. Default convention message with angular preset included:

fix -> bug fixes: patch release
feat -> feature: minor release
breaking change -> break change: major release

Once you push your code it will run GitHub Action and release your project.