DEV Community

loading...
Cover image for Adding configurations to your React App at Runtime

Adding configurations to your React App at Runtime

ms_yogii profile image Yogini Bende ・2 min read

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 %}

Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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 :)

Keep learning! 🙌

Discussion (8)

pic
Editor guide
Collapse
ziker22 profile image
Zikitel22 • Edited

This solution can have bad security implications its straight dangerous recommending it in a blog post. This could be solved by using env vars

Collapse
ms_yogii profile image
Yogini Bende Author

Hey,
This particular solution can be very useful in certain use-cases and that was the only purpose of sharing it in a blog post. I may have missed the implementation of env vars in runtime and would love to understand how it is done. If you can share implementation details for that, it would be really enlightening :)

Collapse
ziker22 profile image
Zikitel22

freecodecamp.org/news/how-to-imple...

This is of course only one of the implementations, but the idea is there :)

Thread Thread
ms_yogii profile image
Yogini Bende Author

Thanks for sharing. Will surely check and try to implement. 🙌

Collapse
thatanjan profile image
Anjan Shomodder

wow.. I get to learn new thing. Thank you so much for sharing.

Collapse
ms_yogii profile image
Yogini Bende Author

Glad it is useful!

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

This is something new I saw. Thanks for sharing!

Collapse
ms_yogii profile image
Yogini Bende Author

Happy to know :)