Hello folks,

Recently I came across a situation where one of my react projects had to configure with build once, deploy everywhere feature. While exploring many ways, I found one really nice implementation to do it.

But before we see that, let’s first understand, why we need this feature? The application I am working on needs multiple deployments, into different AWS accounts. Hence with each deployment, API URL will be new. If we use the traditional way of configuring API URLs and other params, we will have to create a build every time we change the URL. Apart from that, it will also be very difficult if we ever think of automating this deployment process.

Hence, the best solution to this was knowing a way to add configurations into your project at runtime, after creating a build.

Please note, with this approach, DO NOT store an API KEY or any other information which can be sensitive for the security of your app.

So let’s get started and understand how to do runtime configurations to a react project.

The project is created with create-react-app and has a typical folder structure. I created a file name config.js in my public folder. You can create this file at the root folder as well. After adding the required variables in the config.js file, the file looked something like this -

// File: config.js```
{% endraw %}


var BASE_URL = '<API_URL_GOES_HERE>';
var VERSION = '<API_VERSION_GOES_HERE>';
var SETTING_OPTION = true;
{% raw %}

These options in the file are just examples. You can add variables as per your requirement. When we want to configure the app at runtime, all we need to do is change the values in this file and the app will work as expected.

Now, we need to add this config file into our app and try to access the variable values stored in it. To configure it in the app, we just need to link it to the index.html file inside a public folder. So, open your index.html file and link our config.js as follows.



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
            crossorigin="anonymous"
        />
        <link rel="shortcut icon" href="../favicon.ico" />
        <title>My App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>

        <script src="%PUBLIC_URL%/config.js"></script>
    </body>
</html>

Here, note how we have added config.js using a script tag, <script src="%PUBLIC_URL%/config.js"></script>. The %PUBLIC_URL% will insert the URL of your app and you will be able to get the access of all the variables inside config.js file.

The last question left is, how to access these variables? These variables will go inside the window object. Hence, to access them, all you need to do is call window.BASE_URL and you are good to go.

That is it! This was the most simple implementation to enable runtime config in your react app. But as mentioned earlier, be mindful while adding the data to this file.

Please do share your use-cases for the runtime configurations and your feedback/comments about the article will be welcomed, always :)

You can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep learning! 🙌

Adding configurations to your React App at Runtime