read web.config in react

Question

I have follow this example to add web.config file to react project.

https://javascript.works-hub.com/learn/how-to-host-a-react-app-on-azure-10042

I have added below code to my web.config.

 <appSettings>
    <add key="SERVICE_BASE_URL"value="https://localhost:44385/"/> 
</appSettings>

I need to read this value from react. Is there a way to do this. please give any suggestions. I tried this way.

import "../web.config";
let SERVICE_BASE_URL = '<%= System.Configuration.ConfigurationManager.AppSettings["SERVICE_BASE_URL"].ToString() %>';

Answer 1

• Create a .env file at the root of your React project to declare environment variables.
• Environment variables in React must be prefixed with REACT APP_, or else the variable would be ignored during bundling.
• You can access these variables without requiring any import statements by using the process.env global object.
• You can also change the settings of your environment variables depending on the current situation. The variables can be stored in .env.development for a development environment.
• Similarly, you can maintain the variables in .env.production for a production setting.

Please refer Store and Read Configuration Files Using React , Environment Variables in ReactJS. and SO thread for more information.