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)

score 5 · Accepted Answer · answered Aug 11 '19 at 12:50

5

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

answered Aug 11 '19 at 12:50

Thibault

446
7
17

score 0 · Answer 2 · answered Jul 10 '19 at 08:38

0

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.

answered Jul 10 '19 at 08:38

Glue Ops

658
3
16

I did not put every tasks of my build stage, I do publish my artifacts at the end. And I pick the right artifact in my release pipeline. But I want to avoid duplication when I add a new environment (this is my main issue). – Thibault Jul 10 '19 at 08:43
Seems to me the problem is that you are constrained by react which requires you to build your environment variables into each environment release. Which means, every time you add a new environment, you have to define those variables and then subsequently make a new build. I'm not sure there's necessarily an easy way to solve this. You could write some complex build pipeline scripts to search through your builds and generate the steps on the fly but....personally I prefer to keep things simple and use templated tasks. – Glue Ops Jul 10 '19 at 11:30

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

2 Answers2