DEV Community: Shashank Mishra

Part 4 : Create azure-pipelines.yml and setting environment variables

Shashank Mishra — Thu, 28 Nov 2024 11:10:41 +0000

In this part, I’ll walk you through creating azure-pipelines.yml file which is used to define and configure Azure Pipelines, which is Microsoft's CI/CD (Continuous Integration/Continuous Delivery) service. It provides a declarative way to describe how your application should be built, tested, and deployed. The file resides in your source code repository and allows you to automate and manage your pipeline workflows.

Step 1: Create azure-pipelines.yml file

Please create a new file named azure-pipeline.yml(if does not exist already) on root level of your project directory and update/paste the content with below mentioned code snippet :

trigger:
  - main
pr:
  autoCancel: true
  branches:
    include:
      - main
  drafts: true
stages:
  - stage: Build
    displayName: Build the web application
    jobs:
      - job: BuildJob
        displayName: Build job
        pool:
          vmImage: ubuntu-latest
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: 20.x
            displayName: Install Node.js
          - script: |
              npm install
              npm run build
            displayName: Build Artifacts
          - script: |
              npm run release:semantic-release
            displayName: Semantic Release
            env:
              GH_TOKEN: $(gitToken)
              GITHUB_TOKEN: $(gitToken)
          - script: |
              echo $(nextRelease)
            displayName: 'Show next version'
          - bash: echo "##vso[task.setvariable variable=nextReleaseVersion;isOutput=true]$(nextRelease)"
            name: MyOutputVar
            displayName: 'Set output variable'
  - stage: Dev
    displayName: Deploy to the dev environment
    dependsOn: Build
    condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'))
    jobs:
      - deployment: Deploy
        environment: dev
      - job: DevBuildJob
        displayName: Deploy to Dev
        pool:
          vmImage: ubuntu-latest
        variables:
          nextReleaseVersion: $[stageDependencies.Build.BuildJob.outputs['MyOutputVar.nextReleaseVersion']]
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: 20.x
            displayName: Install Node.js
          - script: |
              echo "Output Variable $(nextReleaseVersion)"
            displayName: Display next release version
          - script: |
              npm install
              npm run build 
            displayName: Build Artifacts For Dev Deployment
          - bash: echo "##vso[task.setvariable variable=nextReleaseVersion;isOutput=true]$(nextReleaseVersion)"
            name: MyOutputVar
            displayName: 'Set output variable'
  - stage: Staging
    displayName: Deploy to the staging environment
    dependsOn: Dev
    condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/main'))
    jobs:
      - deployment: Deploy
        environment: stage
      - job: Build
        displayName: Build job
        pool:
          vmImage: ubuntu-latest
        variables:
          nextReleaseVersion: $[stageDependencies.Dev.DevBuildJob.outputs['MyOutputVar.nextReleaseVersion']]
        steps:
          - task: NodeTool@0
            inputs:
              versionSpec: 20.x
            displayName: Install Node.js
          - script: |
              echo "Output Variable $(nextReleaseVersion)"
            displayName: Display next release version
          - script: |
              npm install
              npm run build
            displayName: Build Artifacts For Stage Deployment

Step 2: Create deployment environment for pipeline

Create two environments and add approvals/checks by clicking buttons highlighted in screenshot :

Step 3: Setting environment variables from UI

To set secrets in the web interface, follow these steps:

Go to the Pipelines page, select the appropriate pipeline, and then select Edit.
Locate the Variables for this pipeline.
Add or update the variable.
Need to add two variables for now mainly :
gitToken : To store personal access token of github.
husky : To disable husky for pipeline to commit changelogs and publish release, otherwise commitizen interactive session will start and pipeline will never end.
Select the option to Keep this value secret to store the variable in an encrypted manner.
Save the pipeline.

Step 4: Commit and push changes to github repo

As of now you have configured azure devops pipeline ecosystem and updated azure-pipelines.yml file that you need to push to github repo. Please create a feature branch from main branch and commit your changes and create a pull request targeting your main branch. Ideally if nothing goes wrong, PR trigger will be executed. Our azure pipeline and azure-pipelines.yml file are configured in such a way that we will notice following points :

As soon as any PR is created, only Build stage will be executed. Deployment stage will be executed only if reference branch is "main"
As soon as we merge the PR, build stage will again be executed and stop on dev deployment stage for approval/check added on dev environment. Same will haapern with stage deployment environment.
In all the stages we have are showing the next release version based on commit history, that we can use accordingly in deployment and upcoming stages to create version set of build artifacts.

Note : Specially for this series , we keep azure pipeline configuration simple, you can make it as complex as possible based on your project requirements.

Wrapping Up: The Final Piece of the Puzzle 🎉

Congratulations on making it through the final part of this blog series! We've covered everything from setting up the basics to building a robust auto-incrementing semantic versioning pipeline using Commitizen, npm semantic-release, and Azure Pipelines.

This journey was about more than just automation—it was about empowering your development process with consistent versioning, streamlined releases, and reduced manual effort. I hope this series has equipped you with the knowledge and tools to create smarter pipelines for your projects.

Thank you for following along, and I’d love to hear about how you’ve applied these techniques in your workflows. If you have any questions, feedback, or success stories, feel free to share them in the comments or connect with me!

Until next time, happy coding and seamless releasing! 🚀

Part 3 : Initialize and configure semantic release with releaserc

Shashank Mishra — Thu, 28 Nov 2024 07:11:48 +0000

In this part, I’ll walk you through initializing and configuring semantic release using .releaserc configuration file. This will help in analyzing your Git commit history and following the Conventional Commits specification, it determines the next semantic version (major, minor, or patch) for your project. It also generates release notes, publishes the package, and creates Git tags automatically.

By the end of this guide, you’ll have a fully functioning semantic release workflow that will also create a variable in your azure pipeline for holding the value next release version based on commit message history.

Step 1: Install semantic-release and required Plugins

1.a Install semantic-release and semantic-release plugins as a dev dependency:
npm install --save-dev semantic-release

npm install --save-dev @semantic-release/changelog @semantic-release/git @semantic-release/release-notes-generator @semantic-release/github semantic-release-ado

1.b Create a .releaserc file in your project’s root directory
Here’s an example configuration:

{
  "branches": [
    {
      "name": "main",
      "prerelease": false
    }
  ],
  "plugins": [
    [
      "@semantic-release/commit-analyzer",
      {
        "preset": "conventionalcommits"
      }
    ],
    [
      "@semantic-release/release-notes-generator",
      {
        "preset": "conventionalcommits"
      }
    ],
    [
      "@semantic-release/changelog",
      {
        "changelogFile": "docs/CHANGELOG.md"
      }
    ],
    [
      "@semantic-release/git",
      {
        "assets": [
          "dist/**/*.{js,css}",
          "docs",
          "package.json"
        ],
        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
      }
    ],
    "@semantic-release/github",
    "semantic-release-ado"
  ]
}

1.c Add Semantic Release Script
Add a script to your package.json:
"release:semantic-release": "npx semantic-release"

Summary of Plugin Functions

@semantic-release/commit-analyzer: Analyzes commit messages to determine the next version (major, minor, patch).
@semantic-release/release-notes-generator: Generates release notes based on commits.
@semantic-release/changelog: Updates the CHANGELOG.md file.
@semantic-release/github: Creates a GitHub release with changelogs and assets.
@semantic-release/git: Commits updated files (like CHANGELOG.md and package.json).
@semantic-release-ado: Generates version number that will be stored on a variable available to downstream steps on the job. By default this variable is named nextRelease, but the name can be configured in the plugin options. Read more

Conclusion

By following these steps, you’ve successfully configured sementic release in order to determine the next semantic version (major, minor, or patch) for your project. It also generates release notes, publishes the package, and creates Git tags automatically.

Stay tuned for more guides to help you optimize your pipelines and development practices. Happy coding! 🚀

Part 2 : Configure Commitizen using Husky tool for automate version and structured commit message

Shashank Mishra — Thu, 28 Nov 2024 05:45:09 +0000

In this part, I’ll walk you through configure Commitizen using Husky tool for automate version (major, minor, patch) and structured git commit message. We will use this automate generated version in upcoming semantic release step pipeline

By the end of this guide, you’ll have a fully functioning git commit workflow to have structured commit message with automate version.

Step 1: Configure Husky

Navigate to your project root directory
1.a Add Husky to your project using npm or Yarn:
npm install --save-dev husky
1.b Run the following command to set up Husky in your project:
npx husky install
This command will create a .husky directory at root level of your project and will contain configuration files of husky hooks(pre-commit, pre-commit-message etc). We will add pre-commit-message command later on once we will be done with configuring Commitizen.

Step 2: Initialize and Configure Commitizen

2.a Install Commitizen as a development dependency:
npm install --save-dev commitizen
2.b Choose and Install an Adapter
Adapters define the format of commit messages. For example, use cz-conventional-changelog to follow the Conventional Commits specification:
npm install --save-dev cz-conventional-changelog
2.c Configure Commitizen
Tell Commitizen which adapter to use by adding the commitizenconfiguration to your package.json file:

{
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

2.d Add commitizen command to pre-commit-message hook of husky
Navigate to .husky directory and search for prepare-commit-msg file inside it and replace the content with below mention snippet.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

exec < /dev/console && npx cz --hook || true

Note : Git commands by default checks for .husky directory in your project's root level and run the hook accordingly.This will allow husky hook to execute the commitizen command and will open interactive session once you try to commit your changes.

Conclusion

By following these steps, you’ve successfully configured commitizen with husky in order to achieve structured commit message with automate semantic version control.
Stay tuned for more guides to help you optimize your pipelines and development practices. Happy coding! 🚀

Part 1 : How to Create and Configure a New Azure Pipeline with a GitHub Repository

Shashank Mishra — Wed, 27 Nov 2024 12:56:39 +0000

In this part, I’ll walk you through creating a new Azure Pipeline, connecting it to a GitHub repository, and configuring the integration with an Azure application installed on your GitHub repository.

By the end of this guide, you’ll have a fully functioning Azure Pipeline connected to your GitHub repo, ready to automate your builds and deployments. 🚀

Prerequisite

Must have Azure Devops account (Recommended : having at least one organization created within with name same as that of your Github user name)
Must have Github Account

Step 1: Create a New GitHub Repository

Create a New Repository:

Login to your Github account and click the New button.
Provide a repository name (e.g., semantic-version-template).
Choose between Public or Private visibility.
Initialize the repository with a README and .gitignore according to language used or leave it empty if you plan to push existing code.
Click Create Repository.
GitHub will show you a URL for the repository https://github.com/<username>/<repository-name>.git

Note : Make sure repo must have main branch created in it.

Step 2: Create a New React App Using CRA

1. Install NodeJs
Ensure you have Node.js installed on your system. You can download it from nodejs.org.
To verify Node.js and npm are installed:
node -v npm -v

2. Create a New React App
Use the following command to create a new React app:
npx create-react-app <your_app_name>

3. Navigate to Your App's Directory:
cd <your_app_name>

Note : You can create project of your own interest.

Step 3: Add the Remote Repository to Your Local Directory

1. Add Remote Origin
Use the git remote add command to link your local repository with the GitHub repository but make sure your in project directory :
git remote add origin https://github.com/<username>/<repository-name>.git
2. Verify the Remote
Confirm the remote has been added correctly:
git remote -v

origin  https://github.com/<username>/<repository-name>.git (fetch)
origin  https://github.com/<username>/<repository-name>.git (push)

Step 4: Create Azure Devops project

1. Navigate to Azure DevOps:
Go to Azure DevOps and log in.
Note : As soon as you create an azure devops account it create a default organization for you.
2. Create Azure Devops Project :
Click on New project button highlighted in screenshot below :

Provide name, description, set visibility and click on Create button highlighted in screenshot below :

Step 5: Create a New Azure Pipeline and connect with Github repo

1. Create new pipeline:
1.a In your Azure DevOps project, select newly create project navigate to Pipelines menu in left side and click New Pipeline button highlighted in screenshot below :

1.b Click on GitHub option

1.c Select the repo which you want to create pipeline for :

1.d As soon as you select any repo, you will be redirected to configure tab where azure devops will try to connect with your repository and ask for authentication.

1.e After successful authentication azure devops will install Azure Pipeline App on your Github repo.The Azure Pipelines GitHub App is an official GitHub application that integrates Azure Pipelines with GitHub repositories. It enables seamless CI/CD workflows by allowing Azure Pipelines to interact directly with your GitHub repositories. This app is used to automatically trigger builds, tests, and deployments in Azure Pipelines whenever changes are made in your GitHub repositories.

1.f After installing Azure Pipeline App, you can choose a template for azure-pipeline.yml file for initial pipeline execution. That can be changed later on.

Conclusion

By following these steps, you’ve successfully created a new GitHub repository, installed the Azure Pipelines app, and configured an Azure Pipeline to automate builds for your project.
Stay tuned for more guides to help you optimize your pipelines and development practices. Happy coding! 🚀

Introduction to Creating an Auto-Increment Semantic Versioning Pipeline with Commitizen, Semantic Release, and Azure Pipelines

Shashank Mishra — Wed, 27 Nov 2024 03:28:55 +0000

Hello, Dev Community! 👋

I'm thrilled to introduce an upcoming series of posts where we'll dive deep into building an auto-increment semantic versioning pipeline using some of the most powerful tools available: Commitizen, Semantic Release, and Azure Pipelines. 🎉

Managing versioning manually can be a hassle, especially as projects grow and teams expand. This series will be divided into four actionable and concise parts. In this series, I'll walk you through how to:

Part-1 : Create and configure azure pipeline with multi environment release CI/CD pipeline with Github repo. Read More
Part-2 : Enforce structured commit messages using Commitizen and automate version increments (major, minor, patch) based on commit messages. Read More
Part-3 : Automatically update changelogs, publish releases and identify new release version based on commit message using Semantic Release.Read More
Part 4 : Seamlessly integrate everything into an Azure DevOps pipeline for a robust CI/CD workflow to release versioned set build artifacts.Read More

Who Is This Series For?

Whether you're a seasoned developer or just getting started with CI/CD pipelines, this series is for anyone looking to:

Simplify version management in projects.
Automate changelog updates and publishing.
Build a robust, scalable release process with Azure Pipelines.

Get Ready to Level Up!

Stay tuned as we kick off this journey to modernize and streamline your release process. If you have any questions or topics you'd like covered in this series, feel free to drop a comment below.

Let’s make versioning effortless! 💡

Happy coding! 🖥️✨