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 · 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

User · 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

[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