React Application Deployments with Runtime Configuration

Most of the time React developers ignore the fact that Babel will write environment variables into the compiled JavaScript during build time. This costs latency in multi-stage releases due to the process of creating the build for different deployments needing different configuration properties for the same artifacts.

Simply, a change in application configuration settings requires a rebuild and restart. In this article, we travel through the process of configuring the react application to load deployment properties at runtime.

Prerequisites

· ReactJS

· ReactJS Toolchain

· Shell script

Step- 1:

Development Mode

Create a file “runtime-config.js” similar to the below script in the “public” folder with necessary settings that are used in the application runtime.

window['runtime'] = {​​
   "SERVICE_URL": "http://localhost:3000",
   "API_URL": "http://localhost:8000"
}​​

On execution of script over browser, the runtime object gets assigned to the browser’s window object and can be accessed throughout window session.

Production Mode

For server deployments, we can use the same step as in development mode. But for container deployments, create a file “runtime-config.sh” in the root directory of a project which will generate a config file with necessary settings from environment variables that are used in the application. The output of the below shell script will be the same as the file created in development mode but in the case of production mode, it needs to be moved into the build folder [destfile] for consumption.

#!/bin/sh
# Configuration file to be created
  file=./runtime-config.js
# Destination folder to copy generated runtime-config.js file
  destfile=./build
# Remove file on exists
  [-f $file ] && rm $file
# Append data to the file
  echo "window['runtime'] = $config" >> $file
# Default value is taken when environment variable not found.
# ${service_url     :-  "http://localhost:3000"} 
#  [Env variable]            [Default value]
# Any no. of env variables can be added with predefined syntax  
echo "$(cat <<EOM
         window['runtime'] =
          {
          "SERVICE_URL": "${SERVICE_URL:-"http://localhost:3000"}",
          "API_URL": "${API_URL:-"http://localhost:8000"}"          
}
EOM
)" > $file
# Move generated file to build folder
mv $file $destfile

Any number of environment variables can be registered as below in the file to fetch and load during the application start.

echo "$(cat <<EOM
         window['runtime'] =
          {
          "SERVICE_URL": "${SERVICE_URL:-"http://localhost:3000"}",
          "API_URL": "${API_URL:-"http://localhost:8000"}",
          "UPLOAD_URL":"${API_URL:-"http://localhost:5000"}"                            
                .             
                .
}
EOM
)" > $file

Step- 2:

In root index.html, link the config file to get loaded into the browser as a JavaScript resource.

<script src="%PUBLIC_URL%/runtime-config.js"></script>

Step-3:

Wherever needed, Attributes from the window object can be accessed like below.

window.runtime.SERVICE_URL

Step-4:

Development Mode

A simple “npm start” command is enough to run the application with the file loaded into the browser. But no significant change can be seen while running in development mode other than having a simple and centralized configuration file.

Production Mode

On running “npm run build && sh runtime-config.sh” commands, a build folder is generated and the shell script creates a “runtime-config.js” file with associated environment variables. Serve the build folder with any suitable web server but de facto NGINX is used for React applications.

We can edit the file while the application is in a running state and the changes will be reflected without rebuilding the application.

The essence of loading configurations during run time can be seen in the next blog that explains the Production release of React application by configuring NGINX as a web server using Multi-Stage Docker Build.

Give a cheer if you like this post

Please comment or share your feedback

Happy coding…