As we know there are two ways in which we can make our React App render, one is Client Side Render and the other is Server Side Render.
There are standard ways of deploying the React App as a microservice with the help of Kubernetes and Docker. But what if we are using environment variables in our App, then how are we going to use it and deploy it using Kubernetes?
There are two ways we declare our environment variables for the app, One is with the help of Configmap in Kubernetes and the other is declaring environment variables in your Docker file.
But, for the case of CSR React App, the environment variables are not available to us if we use the above two approaches. Because for the CSR React App, the JS files must be already built before starting the docker container and the environment variables must be present to it before the build process, but the environment variables are available to us only when the docker container is started not before it.
For Server Side Rendered React App, the files are driven from server therefore environment variables are easily accessible to you even after the build.
One thing we can do that, is build and start the app at the same time when the docker container starts. But that is not recommended, because it increases the Memory usage and CPU cores of the system while deploying through Kubernetes.
So, how do we do it?
We all modify our Dockerfile in such a way that the environment variables are available to the React app before its build. First, We will create a .properties or .env file which will contains all your environment variables with its values as a Key-Value pair.
And source it into the container before the build. But here’s one catch, if the written instructions like below are in the Dockerfile then the environment variables will still not be accessible to the React App.
It is because RUN command in Dockerfile executes in a new layer and creates a new image, so whenever we run the Docker Image these layers are executed one by one.
Since the source commands are separate instruction(layer) and npm run build as a separate, those environment variables are accessible only on that layer not on the one in which the build process is executed. So, we should write our Dockerfile like this.
So by writing this way, we source the environment variables and started the build process on the same layer and therefore, the environment variables will be accessible to the app and can be used inside it.
And those environment variables can be used in the React app by declaring it inside the Webpack Config using DefinePlugin, which will result in declaring the variables as global variables for the app.
So in this way, we achieve the usage of Environment Variables in the CSR React App and deploy it as a microservice using Kubernetes.