How to deploy a react app to mutiple environments without multiple builds?

Question

I'm setting up a CI/CD pipeline using Azure DevOps to automatically deploy a React application to multiple environments. As I understood things, the environments variables (REACT_APP_*) are used during the npm build. How do I set up the build phase without creating a step for each environment?

I'm using a fresh ASP.Net Boilerplate project with a React front-end.

.

Here is what I have at the moment

I replicated the build task in the package.json to allow multiple environments

"scripts": {
  ...
  "build": "set REACT_APP_ENV=production && react-app-rewired build --scripts-version react-scripts-ts",
  "builduat": "set REACT_APP_ENV=uat && react-app-rewired build --scripts-version react-scripts-ts",
...
}

Then in my CI pipeline, I have duplicated the build task

- script: yarn builduat
  displayName: '[UAT] Yarn build front-end'
  workingDirectory: $(WorkingDirectoryReact)

- script: yarn build
  displayName: '[PROD] Yarn build front-end'
  workingDirectory: $(WorkingDirectoryReact)

I don't want to duplicate things for every environments so what's the ideal solution ? I don't really want to build the solution during the CD (Deployment phase)

Answer 1

I finally did a PowerShell script that will replace content in the build artifacts.

All the details can be found there: https://github.com/Thibaultce/react-azuredevops-buildonce-deploymany