Dynamic Environment Variables for React App Running on OpenShift (Kubernetes)

Using Environment variables for React App running locally is dead-easy. However this in production get complex when the same app is deployed on Kubernetes and you are supposed to use dynamic environment variables.

This is my recipe to achieve $Title

What is an environment file ?

Environment file or just env is a file holds variables and some sensitive data about your app

How to push Dynamic Environment Vars to React App hosted on K8s

Here is a great blog that documents how to use dynamic env vars on Docker, however in my problem statement, i want to deploy the React app on OpenShift(Kubernetes)

The approach described below is useful in a situation where you want to fetch API URL from an OpenShift route and use that as environment variable for React App. This means you do not want to hardcode variable value in .env

• Export values that needs to be supplied to React App in a local variable

export REACT_APP_CHAT_BACKEND=$(oc get route chat-app-backend -o=jsonpath=’{.spec.host}’)

• Using REACT_APP as variable prefix add the variable and its value into a local file called .env (you can use any name)

echo "REACT_APP_CHAT_BACKEND="$REACT_APP_CHAT_BACKEND >> .env
echo "REACT_APP_HTTP_PROXY=https://"$REACT_APP_CHAT_BACKEND >> .env# Verify file contentscat .env

• Create a Kubernetes Config Map using this .env

oc create configmap chat-app-frontend --from-file=.env# Verify Config Map
oc get cm

• In your react app, install env-cmd library

npm install env-cmd

• Edit start script in package.json and add env-cmd -f <container_path>/.env as prefix (shown below)

"scripts": {"start": "env-cmd -f /tmp/.env react-scripts start","build": "react-scripts build"},

• Git commit and deploy your modified React App. If you are using OpenShift S2i / Build Config, just trigger the build
• Don’t worry your app container will fail at first complaining it can’t find /tmp/.env file
• To fix it add the config map to deployment configuration

oc set volume deployment/chat-app-frontend --add --type configmap --configmap-name chat-app-frontend --mount-path /tmp

Note: You can the change the config map , volume mount point directory, if your containerised application directory permission allows you to do

• This will trigger a new pod creation that will now have your custom environment file under path /tmp/.env and env-cmd command will apply this into your React app once its boots up
• In case you need to change the environment variable or add a new one to .env file, you just need to edit the config map or delete & recreate a new config map. Followed by manually destroying the React App POD. Deployment will trigger a new pod creation with the new config map data.

This is how you can apply a dynamic environment variable to your React App, when the app is deployed on Kubernetes.

Hope this was useful \o