Automates the versioning and package publishing process, ensuring that your releases are consistent and based on the commit messages.

By following this guide, you will set up Semantic Release, configure Husky for Git hooks, and create a GitHub Actions workflow to automate the release process. This setup will help streamline your development workflow and maintain a clear and organized release history.

https://github.com/brunomacedo-coxbr/semantic-release.git

Implementing Semantic Release in Front-End Projects

1. Install Required Packages

First, install the necessary packages by running:

yarn add @commitlint/cli @commitlint/config-conventional @commitlint/cz-commitlint @semantic-release/changelog @semantic-release/git @semantic-release/github @semantic-release/release-notes-generator commitizen husky inquirer semantic-release --dev

2. Setup .releaserc

Create a .releaserc file in the root of your project with the following content:

{
  "branches": [
    "main"
  ],
  "plugins": [
    "@semantic-release/commit-analyzer",
    [
      "@semantic-release/release-notes-generator",
      {
        "preset": "angular",
        "parserOpts": {
          "noteKeywords": [
            "BREAKING CHANGE",
            "BREAKING CHANGES",
            "BREAKING"
          ]
        },
        "writerOpts": {
          "commitsSort": [
            "subject",
            "scope"
          ]
        }
      }
    ],
    [
      "@semantic-release/changelog",
      {
        "changelogFile": "CHANGELOG.md"
      }
    ],
    "@semantic-release/git",
    "@semantic-release/github"
  ]
}

3. Setup package.json

Update your package.json to include the following scripts and configurations:

{
  "name": "semantic-release",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "commit": "git-cz",
    "prepare": "npx husky install"
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  },
  "devDependencies": {
    "@commitlint/cli": "^19.3.0",
    "@commitlint/config-conventional": "^19.2.2",
    "@commitlint/cz-commitlint": "^19.5.0",
    "@semantic-release/changelog": "^6.0.3",
    "@semantic-release/git": "^10.0.1",
    "@semantic-release/github": "^10.3.3",
    "@semantic-release/release-notes-generator": "^14.0.1",
    "commitizen": "^4.3.0",
    "husky": "^9.0.11",
    "inquirer": "9",
    "semantic-release": "^24.1.1"
  }
}

4. Setup Husky

Initialize Husky and add the commit-msg hook:

npx husky install
npx husky add .husky/commit-msg 'npx commitlint --edit'

5. Create GitHub Actions Workflow

Create a release.yml file in the .github/workflows directory with the following content:

name: Release

on:
  push:
    branches:
      - main

permissions:
  contents: read

jobs:
  release:
    runs-on: ubuntu-latest
    permissions:
      actions: write
      contents: write
      issues: write
      pull-requests: write

    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Setup ⚡
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Install 📚
        run: |
          npm pkg delete scripts.prepare
          yarn
          npm pkg set scripts.prepare="npx husky install"

      - name: Semantic Release 💥
        run: npx semantic-release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}