How to store Configuration file and read it using React

With webpack you can put env-specific config into the externals field in webpack.config.js

externals: {  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {    serverUrl: "https://myserver.com"  } : {    serverUrl: "http://localhost:8090"  })}

If you want to store the configs in a separate JSON file, that's possible too, you can require that file and assign to Config:

externals: {  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))}

Then in your modules, you can use the config:

var Config = require('Config')fetchData(Config.serverUrl + '/Enterprises/...')

For React:

import Config from 'Config';axios.get(this.app_url, {        'headers': Config.headers        }).then(...);

Not sure if it covers your use case but it's been working pretty well for us.

If you used Create React App, you can set an environment variable using a .env file. The documentation is here:

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Basically do something like this in the .env file at the project root.

REACT_APP_NOT_SECRET_CODE=abcdef

Note that the variable name must start with REACT_APP_

You can access it from your component with

process.env.REACT_APP_NOT_SECRET_CODE

You can use the dotenv package no matter what setup you use. It allows you to create a .env in your project root and specify your keys like so

REACT_APP_SERVER_PORT=8000

In your applications entry file your just call dotenv(); before accessing the keys like so

process.env.REACT_APP_SERVER_PORT