Search code examples
javascriptreactjsenvironment-variablesproperty-files

React JS - Reading environment configurations from external property file

Problem : I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.

Tried Solution : With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.

Possible solutions : Here is one possible approach I can think of -

Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.

Please suggest if this is the correct approach or is there a better solution to this problem?

Solution

  • A Solution which worked for me !!

    1) Create a "config.js" file inside public folder of react project. Sample Content of the "config.js" file - 

    window.env = {
  API_DOMAIN_ADDR: "http://localhost:8080"
};

    2) Refer "config.js" file inside index.html. Code for index.html will be - 

    <body>
    <div id="root"></div>
    <script src="%PUBLIC_URL%/config.js"></script>
  </body>

    3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables - 

    window.env.API_DOMAIN_ADDR

    Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.