How to handle React Config.js file in Azure DevOps Pipeline

Question

I am working Azure DevOps Pipeline to build and deploy React JS application. It contains config.js file which some variables that needs to modified for different environments. Anyone help me how to handle the config.js in Release pipeline while deploying to different stages?

Answer 1

I marked this question as duplicate because I think there is already a suitable answer. Nevertheless, I remembered two other approaches for achieving what you are looking for:

1. Storing your variables in .env files

You can easily store your variables in .env files like described here. You then need to give each .env file a different name for each environment. You could end up having a .env.developemt, a .env.production, ... and so on in your repository. Then you can use the following YAML for building according to your desired environments:

# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build:staging
  displayName: 'npm install and build'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'build'
    ArtifactName: 'drop'
    publishLocation: 'Container'

For each build pipeline, you then use a adjusted YAML. In the shown YAML, you can add custom triggers and stuff. And of course, you need to change the staging to the environment name that you want to build. In that concrete example, if you have a .env.development and a .env.production, you will end up with two YAMLs, one where the staging is replaced by production and one where the staging is replaced by development.

2. Store your variables in JSON files

You could store you variables in JSON files and then use the JavaScript files (which previously stored your variables) to load the data out of those JSON files. Here is how this can be done in detail:

1. Create a file JSON file which contains all the variables you need to change depending on the environment, e.g. config.json with the following content:

{
    "key1":"",
    "key2":"",
    "key3":""
}

2. Now you can use the File Transform Task of Microsoft in you Release Pipeline to modify this JSON file. The task will take the variables defined in the pipeline (as described here) and will overwrite any value in the JSON file which has a matching key. For example, you define key2 = "foo" in your pipeline. The File Transform Task will produce this JSON:

{
    "key1":"",
    "key2":"foo",
    "key3":""
}

3. Last but not least, you need to get the variables defined in your JSON file into your react app. Therefore, you can simply load the config.json into your JavaScript file (which contained those variables before) with the following command:

export const config = "./config.json";

I hope this helps. If anything is unclear, just leave a comment and I can try to explain it :)