Hello, I tried below ways to read REACT_APP_* variables on the React App deployed on App service: Add all the REACT_APP_* to App service -> Configuration -> Application settings : Read the variables within React app as process.env.REACT_APP_* Add them to the Azure devOps release pipeline : Read the variables within React app as process.env.REACT_APP_ Pass the variables to Yml script via Variable group , secure files. Deployment to App service using Azure devops is successful however, the environment variables are not getting passed. Kindly help me with the correct way to solve this environment variable issue. Thanks, Rajashri

Update: @Rajashri Udhoji - was able to solve the env issue by adding variables to the build pipeline. Based on my understanding of your scenario description, you have tried 3 approaches to set environment variables in Azure App Service for react app. If you are building for production to generate the /build locally and then deploying with the /build folder to Azure, verify that the environment variables are accessible in your local environment so they are injected during build time. Kindly checkout this doc section for the steps : Environment variables are missing after deployment . - Also, checkout note - For more information on how React uses and expects environment variables . Just to highlight, also add REACT_APP_MY_ENV_VAR for MY_ENV_VAR . The variable can be accessed using process.env.REACT_APP_MY_ENV_VAR . Find this sample at https://github.com/Azure-Samples/js-e2e-web-app-server-auth/blob/main/appSettings.js for alternative approach. Also, checkout this discussion thread: https://stackoverflow.com/a/75208784/8194837 If you're still having issues with passing environment variables to your app, please provide more details about the error message or exact behavior you're experiencing.

To access REACT_APP_* environment variables within the React app deployed on Azure app services

Rajashri Udhoji 0

Hello,

I tried below ways to read REACT_APP_* variables on the React App deployed on App service:

Add all the REACT_APP_* to App service -> Configuration -> Application settings : Read the variables within React app as process.env.REACT_APP_*
Add them to the Azure devOps release pipeline : Read the variables within React app as process.env.REACT_APP_
Pass the variables to Yml script via Variable group , secure files.

Deployment to App service using Azure devops is successful however, the environment variables are not getting passed.

Kindly help me with the correct way to solve this environment variable issue.

Thanks,
Rajashri

ajkuma 25,781 Reputation points Microsoft Employee

2023-09-13T13:10:35.4666667+00:00

@Rajashri Udhoji ,

Just checking in to see if you had got a chance to see the previous response. If the answer helped (pointed, you in the right direction) > please click Accept Answer Or please share the requested/more info to help you better.
Rajashri Udhoji 0 Reputation points

2023-09-28T06:06:30.13+00:00

Hello,

Thanks for responding.
I was able to solve the env issue by adding variables to the build pipeline.
One observation: If I keep the build variables secret then the build is successful but they are not available at run time.

Is there any way we could pass the secrets during build and ensure that they are available during run time.

thanks again.
ajkuma 25,781 Reputation points Microsoft Employee

2023-09-29T18:58:35.1266667+00:00

@Rajashri Udhoji, Thanks for the follow-up and update. Glad to know that the issue is resolved.

When an app setting or connection string is a key vault reference, the app code can use it like any other app setting or connection string.

I'll update my answer to add your solution step. If the answer pointed you in the right direction, please Accept answer. Due to limitation on Q&A, OP cannot accept their own answer.
Rajashri Udhoji 0 Reputation points

2023-12-14T09:00:18.16+00:00

Regarding the React app deployed on the Azure app service, I aim to manage environment-specific files. As previously indicated, environment variables are currently configured as build variables within the pipeline. However, this method presents challenges. Each deployment to a specific environment necessitates updating an extensive list of environment variables. Additionally, the security of this approach is compromised, as anyone can access the variables tab and retrieve sensitive information.

I am actively seeking a more secure and sustainable approach for passing environment variables during the npm run build command.

By utilizing the secure file option, we can maintain environment-specific files while ensuring that the file remains confidential and inaccessible to unauthorized individuals.

In the YAML file, I initiate the download of the environment-specific file to the root folder before executing the build command. However, it appears that either the file is not downloaded or, if downloaded, the variables are not successfully passed to the build project.

Consequently, the build artifact is generated without the necessary environment variables, leading to deployment failures.

Your assistance in resolving this matter would be greatly appreciated.

Thanks,

Rajashri Udhoji.
ajkuma 25,781 Reputation points Microsoft Employee

2023-12-18T09:12:28.4+00:00

Apologies for the delayed response from over the weekend. I have followed-up with you offline.

Just to highlight, since the build will happen on the DevOps Agent environment variables will need to be added in the pipeline.
This can be done by going to Pipeline -> Click on the Pipeline again -> Edit -> Variables. After adding the needed environment variables in the pipeline trigger a build. The variables will now be replaced during the build.

Note: Since the build is done on the DevOps agent with the variables scoped to the Agent you do not need to re-add those AppSettings in the Azure Web App Portal.

For more information on how React uses and expects environment variables.

Kindly checkout these docs for more info:

React Deployment on App Service Linux
Use Azure Key Vault secrets in Azure Pipelines

2 answers

ajkuma 25,781 Reputation points Microsoft Employee

2023-09-12T20:36:28.2266667+00:00

Update: @Rajashri Udhoji - was able to solve the env issue by adding variables to the build pipeline.

Based on my understanding of your scenario description, you have tried 3 approaches to set environment variables in Azure App Service for react app.

If you are building for production to generate the /build locally and then deploying with the /build folder to Azure, verify that the environment variables are accessible in your local environment so they are injected during build time.

Kindly checkout this doc section for the steps : Environment variables are missing after deployment. - Also, checkout note - For more information on how React uses and expects environment variables.

Just to highlight, also add REACT_APP_MY_ENV_VAR for MY_ENV_VAR. The variable can be accessed using process.env.REACT_APP_MY_ENV_VAR.

Find this sample at https://github.com/Azure-Samples/js-e2e-web-app-server-auth/blob/main/appSettings.js for alternative approach.

Also, checkout this discussion thread: https://stackoverflow.com/a/75208784/8194837

If you're still having issues with passing environment variables to your app, please provide more details about the error message or exact behavior you're experiencing.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Share via

To access REACT_APP_* environment variables within the React app deployed on Azure app services

2 answers

Your answer