1

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)

cpru
  • 78
  • 1
  • 7
Manjunath G
  • 167
  • 2
  • 10
  • 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 May 17 '21 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 Mar 26 '22 at 19:28

1 Answers1

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

Jason Pan
  • 15,263
  • 1
  • 14
  • 29