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

--

--

--

Senior Principal Architect & Developer Evangelist @ Red Hat ♦ Loves K8s, OpenShift, Cloud-Native, Serverless, Hybrid-Multi-Cloud, Distributed Systems

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Perfect Pulled Pork with React Native, Expo, and Express

The 10 steps to change the CSS of your website without knowing how to code

browser window

Build a Super-Modular Todo App with React and Bit Components

Setting Up Email Transfer With NestJS Using NodeMailer

(Il)logical operators in JavaScript

Quick and easy Javascript testing with PlayWright

Mocha Tests Troubleshooting History

React deploy and test with Azure DevOps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karan Singh

Karan Singh

Senior Principal Architect & Developer Evangelist @ Red Hat ♦ Loves K8s, OpenShift, Cloud-Native, Serverless, Hybrid-Multi-Cloud, Distributed Systems

More from Medium

Redis Cluster on Kubernetes

The most elegant way to performance test your microservices running on Kubernetes

Getting started with OPA/Gatekeeper

Composing DAPR Custom State Store Component for Oracle Cloud Object Storage