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

• 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

1 Answer 1

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