In this blog post I want to show you how you can inject environment variables into a React application.
Separating config from code is a good practice for designing applications. For example you need to add config to your front end application, when you have it deployed in different environments, e.g. a staging and a production environment.
Baking the configuration into the code or the Docker image both violates the principle of separating config from code.
The solution is to pass as environment variables, e.g. the API URL of the back end, to React when the Docker container starts up.
But since a React application is just bundled static HTML/JavaScript/CSS, your front end cannot directly pick up the environment variables available on the server side!
This blog post shows you how you nonetheless can do it:
Continue reading “How To Inject Environment Variables Into a React Application On Runtime”