CODEWITHSUNDEEP
reactjsazure-devopscontinuous-integrationaspnetboilerplatemultistage
Thibault
Thibault

Reputation: 516

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

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)

Upvotes: 9

Views: 5645

Answers (2)

Thibault
Thibault

Reputation: 516

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

Upvotes: 5

Glue Ops
Glue Ops

Reputation: 698

I'm not too clued up on react, but your approach is described as "build once, deploy many" and it's a really important aspect of your release process.

The bit you missing is publishing your builds as artifacts which you can then pick up in your release pipeline.

Take a look at the publish artifacts tasks : https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/publish-build-artifacts?view=azure-devops

Publish each of your environments to separate artifacts and then pick them up in your release pipeline.

Upvotes: 0

Related Questions