DEV Community

Cover image for Adding configurations to your React App at Runtime
Yogini Bende
Yogini Bende

Posted on • Updated on

Adding configurations to your React App at Runtime

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

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

Keep learning! πŸ™Œ

Top comments (10)

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
 
hey_yogini profile image
Yogini Bende

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
 
hey_yogini profile image
Yogini Bende

Thanks for sharing. Will surely check and try to implement. πŸ™Œ

Thread Thread
 
ofirkg profile image
Ofir Katz

@ziker22
the link you provided literally has the same solution described here, maybe you misunderstood the concept of runtime config?

Collapse
 
fires3as0n profile image
fires3as0n • Edited

There are no security implications in this approach. Env vars will not solve anything in this case. This is a Frontend application, every line of code including config variables it has is available to any user on the internet.

It is a common error to mess BE (where config is sensible) and FE (where it is not) security approaches.

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

This is something new I saw. Thanks for sharing!

Collapse
 
hey_yogini profile image
Yogini Bende

Happy to know :)

Collapse
 
amanchaudhary1998 profile image
AmanChaudhary1998

Can you help me how these works for multiple environment such as dev, prod and staging at runtime on localhost
I mean how the url changes accordingly at runtime with single build script

Collapse
 
hey_yogini profile image
Yogini Bende

Glad it is useful!