How to set process.env.var in devops Azure pipeline

Question

I have a task to deploy aspnet core React application to 2 different environments: development and production environments. Each of this environments should be configured separately.

I use Azure devops for CI/CD

AspNet project contains following commands for building application

    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

I use adal for authorization that is why I have to pass some secret variables that are different for Dev and Prod

const adalConfig = {
    tenant: process.env.REACT_APP_TENANT,
    clientId: process.env.REACT_APP_CLIENT_ID,
    redirectUri: process.env.REACT_APP_REDIRECT_URI,

In Azure devops I set params with command:

echo ##vso[task.setvariable variable=REACT_APP_TENANT;isOutput=true]c00000-00ce-000-0f00-0000000004000

in the azure devops I have next standard commands for aspnet core build app

• .Net core installer
• Resore
• run command (to set env variables)
• Build
• publish

Issues:

1. Environment variable is not set.
2. I even don't know how to build another artefact for production, but not for development.

Maybe you already had task to deploy core react app to 2 different environments? Or please give advice if I need to change deployment strategy at all.

The only solutions what I found is to use .env file but I have to commit this file to git - to deploy it from master. And I still don't know how to use different files for dev and prod.

Answer 1

TLDR;

1. You have isOutput=true in your task.setvariable command. This only sets a variable in Pipelines engine, to be available to other steps, but doesn't actually map to an env variable. Remove isOutput and you shall see REACT_APP_TENANT env variable.
2. But only in the following steps - the env variable is not immediately accessible in the same pipeline step.
3. You can define variables at pipeline level if you know their values upfront - that should simplify things. task.setvariable is more useful for dynamic variables.
4. If you need different process (or a different set of variables) for different environments, I recommend using multistage YAML pipelines or classic Releases. They both allow for setting up different stages, each with their set of variables.

Long story

We need to distinguish two separate processes:

1. Deployment pipeline that's executed on CI agent
2. Web application that may be hosted in many different ways - Azure Web Apps, self hosting, docker/k8s, etc.

Doing echo ##vso[task.setvariable ...] sets the variable in the pipeline (1.).

The place where reading variables takes place (like tenant: process.env.REACT_APP_TENANT) isn't that obvious. If it's nodejs server-side code, it'll be executed in 2. If it's a part of some build script, it'll be read in 1.

React is tricky, because:

• It react behaves differently in development and release mode. In Release mode, during the build phase, the whole client-side code is compiled down to a static JS file. So the env variables you set in your pipeline should work.
• It cannot simply access any env variable (to protect you from exposing your server env variables on client browser by accident). If using create-react-app (which is what ASP.NET React App does by default), you have to prefix env variables with REACT_APP_ to use them. If using Webpack directly, you'll need some plugin for this.