How to use environment variables in React app hosted in Azure

Add the venerable directly to build pipeline Variables. This will add to the Azure environment variable and the app can use it

The Good Options

I had this problem as well you can customize which env variables are used by using different build scripts for your envs. Found this CRA documentation https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments

You can also set your variables in your YAML. https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline

But what if I need a single build?

I haven't solved this yet if you are using a single build and release stages for different envs (dev, staging, prod). Since everything is built React has whatever env variables you provided at build time. Alternatives I've considered:

1. Separating react build from .NET build, so that you could do this as for each deploy
2. Define all env variables and append eg REACT_APP_SOME_KEY_ then based on subdomain pick specific env eg https://dev.yoursite.com https://yoursite.com , but this option seems non-canonical.
3. Might be a limitation of React needing to build for every environment. Accept that you need separate builds.

When you do the deployment using VSTS to Azure, you can give your environment variables in the build pipeline which will automatically include it in the ReactJS project.

now the end of 2019 and I am still facing the issue with env variables in nodeJs and azure devops.

I didn't find a solution, but I use a workaround. I use pseudo "env var".

I created "env.json" file with the same structure as ".env" file in the project's root. Put this file to ".gitignore" file. Imported this file explicitly to files where I need to use env var. Use it as regular object, instead of process.env.***

Example:

we have ".env", that we need to replace:

REACT_APP_SOMW_KEY=KEY

The next steps for project itself are:

Create "env.json":

{"REACT_APP_SOMW_KEY":"KEY"}

Add it to ".gitignore".

In case of using typescript add the next settings to tsconfig.json:

 "resolveJsonModule": true,

In files where process.env.REACT_APP_SOMW_KEY are located change process.env.REACT_APP_SOMW_KEY to config.REACT_APP_SOMW_KEY and add const config = require("../pathTo/env.json") as a import module in the begginning.

In case of typescript yo can also create interface just to have autocomplete:

export interface IEnvConfig{
  REACT_APP_SOMW_KEY?: string;
}   
const config: IEnvConfig = require("../pathTo/env.json");

The result will be something like this:

const reactSomeKey = /*process.env.REACT_APP_SOMW_KEY*/ config.REACT_APP_SOMW_KEY;

Next steps for Azure DevOps:

Add your keys to azure "key vault" or "variables".

In the CI pipeline before the step of building the project you can set the PowerShell task, which will create the "env.json" file. The same as we should create ".env" file locally since we made git clone with the hidden ".env" file. I put yml task here (in the end you can see 2 debug commands just to be sure that file is created and exist in a project):

- powershell: |
   New-Item -Path $(System.DefaultWorkingDirectory) -Name "env.json" -Force -Value @'
   {
   "REACT_APP_SOMW_KEY": "$(REACT_APP_SOMW_KEY)",
   }
   '@
   Get-Content -Path $(System.DefaultWorkingDirectory)\env.json
   Get-ChildItem -Path $(System.DefaultWorkingDirectory)
  displayName: 'Create "env.json" file'

Outcome: you have almost the same flow with json object keys as you are usually using with ".env". Also you can have both ".env" and "env.json" in the project.