I am unable to read environment variable from azure app service configuration from my REACT app

Question

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.stack.imgur.com/NextN.png

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

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