How to store Configuration file and read it using React

Question

I am new on react js I have implemented one component in which I am fetching the data from server and use it like    CallEnterprise function TenantId         fetchData  http   xxx xxx xx xx 8090 Enterprises TenantId   TenantId    amp format json   then function enterprises                 EnterprisePerspectiveActions getEnterprise enterprises          catch function                 alert  There was some issue in API Call please contact Admin              ComponentAppDispatcher handleViewAction                 actionType  MetaItemConstants RECEIVE ERROR                error   There was a problem getting the enterprises                             I want to store Url in configuration file so when I deployed this on Testing server or on Production I have to just change the url on config file not in js file but I don t know how to use configuration file in react js   Can anyone please guide me how can I achieve this

User · Accepted Answer

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.

User · Answer

In case you have a  properties file or a  ini file  Actually in case if you have any file that has key value pairs like this   someKey someValue someOtherKey someOtherValue   You can import that into webpack by a npm module called properties-reader  I found this really helpful since I m integrating react with Java Spring framework where there is already an application properties file  This helps me to keep all config together in one place    Import that from dependencies section in package json    properties-reader    0 0 16    Import this module into webpack config js on top   const PropertiesReader   require  properties-reader      Read the properties file   const appProperties   PropertiesReader  Path to your properties file    properties    Import this constant as config   externals         Config   JSON stringify appProperties      Use it as the same way as mentioned in the accepted answer   var Config   require  Config   fetchData Config serverUrl     Enterprises

User · Answer

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

User · Answer

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

[javascript] How to store Configuration file and read it using React

Examples related to javascript

Examples related to reactjs

Examples related to configuration

Examples related to webpack

Examples related to flux