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

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 :

1. As soon as any PR is created, only Build stage will be executed. Deployment stage will be executed only if reference branch is "main"
2. 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.
3. 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! 🚀