Unable to replace React env.js variables using Replace Tokens or BashScript in Azure DevOps Release pipeline

Question

I'm working on updating the environment variables in my React application using the Azure DevOps Release pipeline. While I've successfully replaced them in the CI build pipeline, I now need to extend this to support multiple environments in the Release pipeline.

Initially, I tried using .env files for variable management, but the Release pipeline didn't replace them from the build artifact. As a workaround, I created an env.js file to store the variables and attempted to replace them in the bundle.js file. However, I'm still struggling to replace the production variables with the values from the variable group in the Release pipeline.

As this didn't work, I tried using Bash script with sed commands.

I'm still getting this error. Could someone please help.

CI pipeline images below:

Location of env.js in the code strucutre

The kind of artifact, release pipeline is consuming

Answer 1

Update

Based on the further discussions, to configure the ReplaceToken task to replace the variables' names in the env.js file with their respective values, we need to either define the variable value directly in the release pipeline or link a variable group where the variables are restored.

At the same time, we need to make sure the target env.js file is downloaded as an artifact, so that the ReplaceToken task is able to find and process it.

In your screenshot, the env.js file should be downloaded in the folder or the sub folder of $(System.DefaultWorkingDirectory)/_Trusana-UI-POC/drop/patient/ for the ReplaceToken task to search for. For this, I used the commands below in a Bash task running on the ubuntu-latest agent to confirm if the target file was downloaded under path $(System.DefaultWorkingDirectory)/_Trusana-UI-POC/drop/patient/ and check the file contents after value replacement.

tree $(System.DefaultWorkingDirectory)/_Trusana-UI-POC/drop/patient/

cat $(System.DefaultWorkingDirectory)/_Trusana-UI-POC/drop/patient/env.js

---

From the screenshots that you shared, it seemed that you would replace the variables' names in the env.js file with their values; however, in the release pipeline, you were targeting another file bundles.js.

Please modify your pipeline to target the correct file where the pipeline variables were included.

env.js

module.exports = {
  "REACT_APP_ApiBaseUrl" : "#{apiBaseUrl}#"
}