Posted onDec 17, 2021 • Edited onDec 29, 2023

Single Page App Runtime Environment Variables

#javascript #devops #singlepageapp

Introduction

Any single page application (SPA) runs as static page inside a browser runtime environment, and inside a browser, there is nothing like a runtime variables that could be used by SPA. However, there are few hacks through which we can implement dynamic environment variable in a SPA.

But the question is why we need a runtime variable for static page? Well, in my experience there are few cases which compel us to look for runtime or dynamic variable for a SPA. For example, different API endpoints for local, pre-prod, and production, different API keys for pre-prod and prod, and likewise.

Getting Started

We need a few configurations to get started for local development:

An environment file
A Bash script
A NPM script
Include script tag in public/index.html
Script where runtime variable is needed

1. An environment file

Create an env.preprod file, create this file at/public/env/ location e.g./public/env/env.preprod
This is the file where the runtime environment variable will be stored, there could more than one variable in the file.Why under public directory? as it will be bundled during the build process into tarball

//Filename: env.preprodAPP_RUNTIME_PREPROD_KEY=xyz

2. A Bash script

Bash script that will be executed duringnpm start for local, that will create the env-config.js with content from env.preprod file and same for pre-prod during deployment. For prod, we'll have the default env-config.js file.

Filename: env.sh

#!/bin/bash# look for runtime env fileif[!-z"${2}"];thenenvFile="${1}"/env."${2}"fi#If can't find it then exitif[[!-f"$envFile"]];thenecho"Env file doesn't exist!"exit1;fi# create runtime env JS fileif[[!-z"${1}"]];thenenvJs="${1}/env-config.js"fi#Recreate config filerm-rf${envJs}touch${envJs}# Add assignmentecho"window._env_ = {">>${envJs}# Read each line in .env file# Each line represents key=value pairswhileread-r line||[[-n"$line"]];do# Split env variables by character `=`ifprintf'%s\n'"$line" |grep-q-e'=';thenvarname=$(printf'%s\n'"$line" |sed-e's/=.*//')varvalue=$(printf'%s\n'"$line" |sed-e's/^[^=]*=//')fi# Read value of current variable if exists as Environment variablevalue=$(printf'%s\n'"${!varname}")# Otherwise use value from .env file[[-z$value]]&&value=${varvalue}# Append configuration property to JS fileecho"$varname:\"$value\",">>${envJs}done <${envFile}echo"};">>"${envJs}"echo"generated${envJs} with content"cat${envJs}

3. A NPM script

This will wire up as theprestart npm script and execute the bash script.

//Change in package.json file"prestart":"chmod +x ./public/env/env.sh && ./public/env/env.sh ./public/env preprod"

4. Include script tag in the public/index.html

The env-config.js created so far needs to be loaded in the index.html, else we can't use it. When env-config.js is created, the browser's window object is assigned a runtime variable.

<!--Change in index.html--><head><scriptsrc="%PUBLIC_URL%/env/env-config.js?d=20210529"></script></head>

5. Script where runtime variable is actually used

And now for all the hard work done so far, it's time to ripe/use the runtime variable. Since the variable is assigned as a window object, now we can use the way we want. It can also be used in the vanilla JS file file. CheckoutSample Code

//Filename: some-important.jsconstRUNTIME_ENV_KEY=window?._env_?.APP_RUNTIME_PROD_KEY?window._env_.APP_RUNTIME_PROD_KEY:window?._env_?.APP_RUNTIME_PREPROD_KEY;

Also, include some-important.js in the index.html head tag:

<!--Change in index.html--><head><scriptsrc="%PUBLIC_URL%/some-important.js?d=20210529"></script></head>

For Preprod

Execute script during deployment
location.conf (when using NGINX)

1. Execute script during deployment

Include a script to execute theenv.sh in the deployment process. For docker image details, checkout the reference section at the end.

Filename: preprod-deployment.sh

bash ./public/env/env.sh ./public/env preprod

2. location.conf (when using NGINX)

When the Nginx server is used as a web server, allow access to env-config.js file.

Filename: location.conf

location ~ /env/(.+\.(?:js))$ {  expires -1;  add_header Cache-Control "public"}

For Production

1. Create default env-config.js

Creating a default reduces the effort to configure any steps needed during the production deployment. But if we want, we can create another env file like env.prod and run the same during production deployment. However, this is totally up to you!

Filename: env-config.js

window._env_={APP_RUNTIME_PROD_KEY=runtime-env-value};

Sample Code

The code snippet presented in this blog is available in Github,Sample Code.

If you have reached here, then I did a satisfactory effort to keep you reading. Please be kind to leave any comments or ask for any corrections.Happy Coding!