javascript - I am unable to read environment variable from azure app service configuration from my REACT app - Stack Overflow

admin管理员组

文章数量:1023758

I have added my variable in the azure app service configuration and try to read it from my React project but I get undefined every time.

Azure App Service :-

.png

React Code :- console.log("PreviewMode>>" + process.env.REACT_APP_PREVIEWMODE)

I have added my variable in the azure app service configuration and try to read it from my React project but I get undefined every time.

Azure App Service :-

https://i.sstatic/NextN.png

React Code :- console.log("PreviewMode>>" + process.env.REACT_APP_PREVIEWMODE)

• javascript
• node.js
• reactjs
• azure
• azure-app-service-envrmnt

Share Improve this question Follow edited May 18, 2021 at 2:46 cpru 7811 silver badge77 bronze badges asked May 17, 2021 at 20:25 Manjunath GManjunath G 21711 gold badge66 silver badges1515 bronze badges 2

• 5 The azure app service configuration exists on server side while your React app consists in static JavaScript files that execute in the browser. Only Node.js backends could access environment variables, there are none in a browser. – Guerric P Commented May 17, 2021 at 20:30
• React apps run on browsers, so they cannot access server side environment variables. You need to call a service api that is running on server, so it can return values for you. Or use another solution like Firebase Remote Config. – Jone Polvora Commented Mar 26, 2022 at 19:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can't get appsettings in azure app service configuration.

The React client side project essentially downloads a piece of code to run on the client browser, and will not be related to azure application settings. So its process.env cannot read any azure environment variables.

But you can create .env file in your project. Then you can get environment variable by process.env.REACT_APP_PREVIEWMODE. ( I have test it under windows platform. )

For more details, please read answer in below posts.

1. 404 Error when trying to fetch json file from public folder in deployed create-react-app

2. Azure WebApps React: the environment variables exist but are not present when I call process.env

I have added my variable in the azure app service configuration and try to read it from my React project but I get undefined every time.

Azure App Service :-

.png

React Code :- console.log("PreviewMode>>" + process.env.REACT_APP_PREVIEWMODE)

I have added my variable in the azure app service configuration and try to read it from my React project but I get undefined every time.

Azure App Service :-

https://i.sstatic/NextN.png

React Code :- console.log("PreviewMode>>" + process.env.REACT_APP_PREVIEWMODE)

• javascript
• node.js
• reactjs
• azure
• azure-app-service-envrmnt

Share Improve this question Follow edited May 18, 2021 at 2:46 cpru 7811 silver badge77 bronze badges asked May 17, 2021 at 20:25 Manjunath GManjunath G 21711 gold badge66 silver badges1515 bronze badges 2

• 5 The azure app service configuration exists on server side while your React app consists in static JavaScript files that execute in the browser. Only Node.js backends could access environment variables, there are none in a browser. – Guerric P Commented May 17, 2021 at 20:30
• React apps run on browsers, so they cannot access server side environment variables. You need to call a service api that is running on server, so it can return values for you. Or use another solution like Firebase Remote Config. – Jone Polvora Commented Mar 26, 2022 at 19:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can't get appsettings in azure app service configuration.

The React client side project essentially downloads a piece of code to run on the client browser, and will not be related to azure application settings. So its process.env cannot read any azure environment variables.

But you can create .env file in your project. Then you can get environment variable by process.env.REACT_APP_PREVIEWMODE. ( I have test it under windows platform. )

For more details, please read answer in below posts.

1. 404 Error when trying to fetch json file from public folder in deployed create-react-app

2. Azure WebApps React: the environment variables exist but are not present when I call process.env

本文标签：