I’ve recently delved into the world of React and started using create-react-app, sometimes called CRA, to bootstrap up my project and build tool-chain. As you start to build more complex applications than HelloWorld or TODO.js sooner or later you’re going to want to separate some of your configuration from your code. This is incredibly good practice. For example your application might be dependent on a RESTful service, this service might have both production and test URLs. Now if you’re “doing it right”™ then you’ll have these URLs as configuration.

CRA has really good support for separating your code and config. This support is predicated around setting environment variables or using .env files to hold the configuration for a particular environment. I don’t want to have .env files in source control, even if those values that wind up in JavaScript will be out there in plain text for anyone to read. To facilitate this I make use of environment variables controlled by my build environment, in this case Azure DevOps.

For a simple example let’s run with idea of having our app depend on a service with test and production URLs. To accommodate this we might simply set up an environment variable and configure a simple http client to use it.

const customApi = axios.create({
    baseURL:process.env.REACT_APP_API_URL
});
export default customApi;

Now all that needs be done to build for test and production is to set the value of the REACT_APP_API_URL environment variable to match the desired target. In Azure DevOps any variables that you define for the build pipeline are exposed to your tasks as environment variable. Thus configuring a pipeline variable will allow you to build for your target environment.

But what about if you would like to build test and production package in a single pipeline? Now you’ll need to use a obscure little bit of wizardry specific to Azure DevOps to change the value of the REACT_APP_* environment variable by echoing it out inside a special block of text. It’s documented here:
https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=vsts&tabs=yaml%2Cbatch#set-a-job-scoped-variable-from-a-script.

So, what I have done is configure a second pipeline variable:

Then in a script task use the magical echo to overwrite the value of REACT_APP_API_URL for the remainder of the pipeline execution

echo "##vso[task.setvariable variable=REACT_APP_API_URL]$(_prod_REACT_APP_API_URL)"

Now I can call build a second time in the same pipeline. Here’s the complete overview for my pipeline:

There you have it, a single build pipeline for a React application producing packages for both test and production environments.