How to manage multiple environments on Azure DevoOps for React JS application

I'm trying to set up a CI/CD pipeline in Azure DevOps for a React application, and I'm facing challenges managing multiple environments using secure files. I've followed the setup from this GitHub repository and would appreciate some guidance.

Problem Description:- 1] I have a sample environment file (refer image below) used during the 'npm run build' command.

I've uploaded this file to Azure Pipelines Library as a secure file as shown here.

In my package.json, the build command is configured as follows:

Finally, I've created a YAML script that should download the .env file from the secure library and use the variables during the build. The script is as follows:

I'm seeking advice on how to effectively manage multiple environments with the same CI/CD pipeline. Is there a way to pass different environment variables for different environments within the same pipeline?

Any guidance or suggestions would be highly appreciated. Thank you!

I am very new to CI-CD set up for ReactJS using Azure Devops.

From your screenshots, you are using the .env file and the command env-cmd -r development.

Refer to this site: env-cmd

-r, --rc-file [path] Custom rc file path (default path: ./.env-cmdrc(|.js|.json)

-e, --environments [env1,env2,...] The rc file environment(s) to use

Based on your situation, you can modify the .env file name to .env-cmdrc.json.

Then you can change the npm command from env-cmd -r development npm run-script build to env-cmd -e development npm run-script build in Package.json.

For example:

.env-cmdrc.json file:

{
 "development":{
 "REACT_APP_BASE_URL": "https://servername:port/"
 },
 "qa":{
 "REACT_APP_BASE_URL": "http://servername:port/"
 },
  "local":{
  "REACT_APP_BASE_URL": "http://localhost:port/"
  }
 }

Package.json:

"build-dev": "env-cmd -e development npm run-script build"

In Azure DevOps Pipeline, you can add multiple YAML stages to manage multiple environments.

For example:

stages:
- stage: development
  jobs:
  - job: development
    steps:
      - task: NodeTool@0
        inputs:
          versionSpec: '16.x'
        displayName: 'Install Node.js'


      # Download secure file from azure library
      - task: DownloadSecureFile@1
        inputs:
          secureFile: '.env-cmdrc.json'

      # Copy the .env file
      - task: CopyFiles@2
        inputs:
          sourceFolder: '$(Agent.TempDirectory)'
          contents: '**/*.env-cmdrc.json'
          targetFolder: '$(build.sourcesdirectory)'
          cleanTargetFolder: false

      
      - script: |
          npm run build-dev

- stage: qa
  jobs:
  - job: qa
    steps:
      - task: NodeTool@0
        inputs:
          versionSpec: '16.x'
        displayName: 'Install Node.js'


      # Download secure file from azure library
      - task: DownloadSecureFile@1
        inputs:
          secureFile: '.env-cmdrc.json'

      # Copy the .env file
      - task: CopyFiles@2
        inputs:
          sourceFolder: '$(Agent.TempDirectory)'
          contents: '**/*.env-cmdrc.json'
          targetFolder: '$(build.sourcesdirectory)'
          cleanTargetFolder: false

      
      - script: |
          npm run build-qa

....

Note: You need to copy the .env-cmdrc.json file to the same path as the package.json.

If you want to pass the pipeline variable to replace the value in .env-cmdrc file, you can use the File transform task. Here is an example: How to setup devops for build-once, but for multiple environments