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! 🙌
Top comments (10)
This solution can have bad security implications its straight dangerous recommending it in a blog post. This could be solved by using env vars
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 :)
freecodecamp.org/news/how-to-imple...
This is of course only one of the implementations, but the idea is there :)
Thanks for sharing. Will surely check and try to implement. 🙌
@ziker22
the link you provided literally has the same solution described here, maybe you misunderstood the concept of runtime config?
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.
This is something new I saw. Thanks for sharing!
Happy to know :)
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
Glad it is useful!