How to use environment variables in React app hosted in Azure

Question

I'm pretty new to React, and exploring Azure in general as well. I've gotten an ERP background, but that background did include using tools like VSTS and CI/CD. I've heavily relied upon using the 'libraries' in VSTS to specify variables per environment, and then specifying these upon deployment.

But! I've been reading around on the internet, and playing with settings, but to my understanding, I can only 'embed' parameters in the actual code that is generated by NPM. This would basically mean that I'd need to create a seperate build per environment, which I'm not used to. I've always been tought (and tell others) that what you ship to production, should be exactly the same as what has been on pre-prod, or staging, or ... . Is there really no other way to use environment variables? I was thinking of using the Application Settings in Azure App Service, but I can't get them to even pop up in the console. The libraries in VSTS, haven't found how to use these in my deployment either, as there's just one step.

And reading the docs at https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables doesn't make me feel comfortable putting .env files in source control either. I even tried the approach of putting {process.env.NODE_ENV} in my code, but in Azure it just shows up as 'Development', while I even do npm run build (which should be production)...

So, I'm a bit lost here! How can I use environment variables specified in Azure App Service, in my React app?

Thanks!

You can put them in the start of your script as well, e.g. "scripts": { "start": "cross-env REACT_APP_TEST=wow react-scripts start" } — Tholle
– Tholle, Commented Jul 12, 2018 at 19:44
But that gets messy very fast if you have many variables right? — Mortana
– Mortana, Commented Jul 13, 2018 at 5:22

Jonathon H. · Accepted Answer · 2020-01-26 18:17:52Z

14

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://learn.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:

Separating react build from .NET build, so that you could do this as for each deploy
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.
Might be a limitation of React needing to build for every environment. Accept that you need separate builds.

answered Jan 26, 2020 at 18:17

Jonathon H.

3263 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aneesh Gopalakrishnan Over a year ago

Everyone else talks about build time variable. You are talking about run time variables. Build time variables are useless, if you want to quickly change an api key(assuming it is in azure) and test the app without redeploying. There are no real solutions yet.

Shinoy Babu · Accepted Answer · 2020-04-17 13:57:07Z

11

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

answered Apr 17, 2020 at 13:57

Shinoy Babu

1,7792 gold badges13 silver badges12 bronze badges

7 Comments

emamones Over a year ago

as simple as this

Konzy262 Over a year ago

It's not though. What if your infrastructure is contained within an ARM template for an environment that hasn't been created yet? Therefore you won't know what the value of REACT_APP_API_URL is until a release has been run. You can manually attempt to keep your build and release pipelines and variables in sync but this defeats the object of infrastructure as code.

ddieppa Over a year ago

I did create those variables, but still the process.env.CLIENT_ID, for example in my case, when the pipeline is complete and deployed, still getting error that the client id does not exist, any extra step to make it work?

Cathal Mac Donnacha Over a year ago

@ddieppa I think it needs to be process.env.REACT_APP_CLIENT_ID

St.G Over a year ago

This works. I did find out that if you add a variable in regular case it will convert to UPPERCASE. Note that any environmental variables besides NODE_ENV must be prefixed with REACT_APP_. @CathalMacDonnacha's comment above this is exactly correct.

|

hafij · Accepted Answer · 2023-07-04 06:36:02Z

Many of the proposed solutions here did not work (and should not work) but I solved it the following way. However, first let me explain why other solutions may not (should not) work (please correct me if I am wrong)

Adding pipeline variables (even though they are environment variables) should not work since a react app is run on the client side and there is no server side code that can inject environment variables to the react app.
Installing environment variable task on the classic pipeline should not work for the same reason.
Adding to Application Settings in azure app service should not work for the same reason.
Having .env or .env.development or .env.production file in a git repo should not be a good practice as it may compromise api keys and other sensitive information.

So here is my solution -

Step1: Add all those .env files to azure devops library as secure files. You can download these secure files in the build machine using a DownloadSecureFile@1 pipeline task (yml). This way we are making sure the correct .env file is provided in the build machine before the task yarn build --mode development in the pipeline.

Step2: Add the following task in your azure yml pipeline in appropriate place. I have created a github repo https://github.com/mail4hafij/react_azure_devops_pipeline if you want to see a complete example.

  # Download secure file from azure library
  - task: DownloadSecureFile@1
    inputs:
      secureFile: '.env.development'

  # Copy the .env file
  - task: CopyFiles@2
    inputs:
      sourceFolder: '$(Agent.TempDirectory)'
      contents: '**/*.env.development'
      targetFolder: '$(YOUR_DEFINED_PROJECT_ROOT_FOLDER_VARIABLE)'
      cleanTargetFolder: false

Keep note, secure files can't be edited but you can always re-upload.

Thanks. This also works with the dockerized version of React app

Shinoy Babu · Accepted Answer · 2019-11-19 10:47:11Z

4

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.

answered Nov 19, 2019 at 10:47

Shinoy Babu

1,7792 gold badges13 silver badges12 bronze badges

Comments

Ruslan Korkin · Accepted Answer · 2019-12-21 08:58:30Z

3

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.

answered Dec 21, 2019 at 8:58

Ruslan Korkin

5,1692 gold badges32 silver badges26 bronze badges

2 Comments

Richard Over a year ago

For the Azure DevOps deployment, I did almost exactly the same thing. However, I'm serving up my app from a static website from a storage container. I changed this so I generate a config.js file and put it in the webroot. In this file, I create an object on the window like so: window.appSettings = { x: "asdf",... } Then I can refer to this from other parts in my codebase. It seems to at least solve my problem of not having to rebuild my app to deploy it for the different environments.

Nick Turner Over a year ago

The problem I have with this approach like the other answers is that you are hard coding your values into the build. While ok for a small shop, in large shops App Services change, dns changhe, other settings have admins applying biceps. So the admin applies the bicep, he has 100+ app services. Someone deploys your build and he loses everything. Also you will not be able to swap PreProd to Prod and slot settings are a better use. The marked answer shows an example of this

Joshua Duxbury · Accepted Answer · 2020-07-09 19:27:06Z

I used a YAML build and wrote the variable to the .env file. The package I was using to do the transforms in reactjs was dotenv version 8.2.0

So here is my YAML build file, with tasks added to accomplish this

variables:
- group: myvariablegroup

trigger:
  batch: true
  branches:
    include:
      - develop
      - release/*

pool:
  vmImage: 'ubuntu-latest'

stages:
- stage: dev 
  condition: eq(variables['build.sourceBranch'], 'refs/heads/develop')
  jobs:
  - job: DevelopmentDelpoyment
    steps:

    - task: CmdLine@2
      inputs:
        script: 'echo APP_WEB_API = $(myvariable-dev) > Web/.env' 
      displayName: 'Setting environment variables'


    - script: |
        cd Web
        npm install
        npm run build
      displayName: 'npm install and build'


- stage: prod 
  condition: eq(variables['build.sourceBranch'], 'refs/heads/master')
  jobs:
  - job: ProductionDelpoyment
    steps:

    - task: CmdLine@2
      inputs:
        script: 'echo APP_WEB_API = $(myvariable-prod) > Web/.env' 
      displayName: 'Setting environment variables'

    - script: |
        cd Web
        npm install
        npm run build
      displayName: 'npm install and build'

user2410689 · Accepted Answer · 2021-05-18 07:24:03Z

All proposed solutions are way too complex because others already have solved this problem during the package and build process.

To deploy this to azure 2 things have to be done. First remove the .ignore rule that excludes the .env* files. NOTE: ASSUMED you do not put secrets here! Most of the config in the .env file is visible online anyway, during the auth-flow. So, why panic about this file in git? Espially in a private Git I don't see any problem for those .env files.

So, I have .env.dev and a .env.prod... this contains e.g.

REACT_APP_AUTH_URL=https://auth.myid4.info
REACT_APP_ISSUER=https://auth.myid4.info
REACT_APP_IDENTITY_CLIENT_ID=myclientid
REACT_APP_REDIRECT_URL=https://myapp.info/signin-oidc
REACT_APP_AUDIENCE=
REACT_APP_SCOPE=openid profile email roles mysuperapi
REACT_APP_SILENT_REDIRECT_URL=https://myapp.info/silent-renew
REACT_APP_LOGOFF_REDIRECT_URL=https://myapp.info/logout
API_URL=/

the following must be done. npm i --save-dev env-cmd

now, modify in package.json like this. You may have some others, but essentially, add just the correct .env for your environment

env-cmd -f .env.prod

so in my case in package.json

"start": "env-cmd -f .env.dev rimraf ./build && react-scripts start",
"build": "env-cmd -f .env.prod react-scripts build"

Now, I deployed my react JS to azure. I use, FYI, the .NET Core Spa feature.

Dhruv Joshi · Accepted Answer · 2019-02-14 05:48:55Z

1

This route only applicable if you are using Azure DevOps.

Azure DevOps has Section in Pipeline called Library.
Create a new Variable Group and add your env variables.
Associate last create Variable group to your build process.

Also remember to name your env variable starting with REACT_APP_

answered Feb 14, 2019 at 5:48

Dhruv Joshi

2262 silver badges3 bronze badges

Comments

Ricardo Álvarez · Accepted Answer · 2022-08-05 05:48:00Z

1

Had the same problem, my environment variables didn't load on azure build and deploy, and after hours of googling and hitting my head against the wall i just ocurred to me that maybe the blanks before and after the equals sign ("=") were not supposed to be there.

So i changed:

REACT_APP_API_URL = https://some_url

For:

REACT_APP_API_URL=https://some_url

And it worked alright !!

answered Aug 5, 2022 at 5:48

Ricardo Álvarez

1401 gold badge2 silver badges11 bronze badges

Comments

Philip Claren · Accepted Answer · 2019-01-21 12:31:28Z

0

It's not exactly what you are looking for, but maybe this is an alternative solution for your problem (it substitutes the process-env.x into real values during the build step):

https://github.com/babel/minify/tree/master/packages/babel-plugin-transform-inline-environment-variables

answered Jan 21, 2019 at 12:31

Philip Claren

2,9263 gold badges26 silver badges37 bronze badges

Comments

junktrunk · Accepted Answer · 2022-08-30 21:33:38Z

0

As others have said, in your Azure pipeline, add the variable to the pipeline. However some corrections on what others have posted, possibly leveraging newer functionality since their responses were written:

if your variable in your .env file is named REACT_APP_MY_VARIABLE, then the variable you need to add to your Azure pipeline should also be named REACT_APP_MY_VARIABLE (not process.env.REACT_APP_MY_VARIABLE)
when setting up the Azure pipeline variable, you can leave the value empty and check the box for "Let users override this value when running this pipeline". This seems to be the trick to letting react still process the .env file content to retrieve your desired values.

edited Aug 30, 2022 at 21:33

answered Aug 30, 2022 at 19:23

junktrunk

912 silver badges7 bronze badges

Comments

Himanshu Punjabi · Accepted Answer · 2025-01-23 10:51:10Z

If your concern is that the same code should be deployed to multiple environments, I suggest to create a Azure DevOps Pipeline with multiple stages, one each to deploy to Development, Staging and Production environments.

When a commit is done to the release branch, the Pipeline will stick to the commit for its lifetime i.e. while performing a Build and Deployment in each Stage. So, you can be rest assured that the same code is going to all environments.

Bottom line: Build will run for Deployment to each Environment so that a new value of the Environment Variable is picked up. Using Variable Groups is what I would recommend. However, since the Pipeline is attached to the commit, each of these Environment-Builds will Build using the same Source Code / Commit.

Mortana · Accepted Answer · 2018-07-18 07:57:15Z

-3

As an update, it's a bit different then my original approach, but I've gone through the route of using DotEnv and thus using .env files, which I will generate on the fly in VSTS, using the library variables, and thus NOT storing them in source control.

To use DotEnv, I updated the webpack.config; const Dotenv = require('dotenv-webpack');

module.exports = {
    ...
    plugins: [
        new Dotenv()
    ],

Then basically, I created a .env file containing my parameters

MD_API_URL=http://localhost:7623/api/

And to be able to consume them in my TSX files I just use process.env;

static getCustomer(id) {
    return fetch(process.env.MD_API_URL + 'customers/' + id, { mode: 'cors' })
        .then(response => {
        return response.json();
    }).catch(error => {
        return error;
    });
}

answered Jul 18, 2018 at 7:57

Mortana

1,4523 gold badges16 silver badges29 bronze badges

3 Comments

Reft Over a year ago

How are you creating/replacing .env file and its variables in Azure DevOps? What kind of task is it? Can you edit your question with some screenshots perhaps?

Brooks Clark Over a year ago

I have same need...how do you get the .env into a slot on azure?

Nick Turner Over a year ago

You slot settings, this better than the other answers.

Collectives™ on Stack Overflow

How to use environment variables in React app hosted in Azure

13 Answers 13

The Good Options

But what if I need a single build?

1 Comment

7 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

The Good Options

But what if I need a single build?

1 Comment

7 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related