Most applications depend on external factors that have different values depending on the environment where they are deployed. We mostly use for that environment variables. Guess what? Most of React Apps also have this need. In this blog posts presents a clean(er) way to make a multi-stage deployment of a Create React App on a Kubernetes Cluster. You can use this approach for a seamless integration into your continuous deployment pipeline.
In the beginning it will you show how to set up the React App and then guide you through several deployment possibilities on Kubernetes. You will deploy with
kubectl commands, with helm, with kustomize and in the end use skaffold.
The example app displays the latest public bookmarks published on www.bookmarks.dev. Depending on the environment the app is built for, it will display the environment name in the navigation bar and the header’s color is different.
The source code is available on Github
Create a config.js file where you inject the environment variables in the
window object (e.g. window.REACT_APP_API_URL=’https://www.bookmarks.dev/api/public/bookmarks’).
Add this file to the public folder of your react application. Dockerize the react application and at Kubernetes deployment time overwrite the config.js file in the
container - you can do that with Kubernetes configMaps via native kubectl commands, kustomize or helm.