javascriptreactjsconfigurationwebpackflux

How to store Configuration file and read it using React


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+' &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 ?


Solution

  • 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.