Description
Is your proposal related to a problem?
I faced the issue that there is no standard way to override env vars which a react app uses on the Docker container startup a step.
Example:
- My app uses
REACT_APP_API_URI
env var which stores the path to back-end API. - On CI pipeline I have a
build
step which builds my js code to a compressed production version. - After that in another CI step (let's say
docker-build
) I use compressed code from the previous step to build a lightweight Nginx-based docker container. - Now I have two environments
Staging
andProduction
. Of course, each environment has its own backend with a different API URI. So, I want to run two instances of the same container but with different REACT_APP_API_URI env var:
// On Staging env:
docker run -p 8080:8080 -e REACT_APP_API_URI =http://staging.api.example.com my-container:latest
// On Production env:
docker run -p 8080:8080 -e REACT_APP_API_URI =http://api.example.com my-container:latest
But it is will be impossible to do because JS code are already built.
It's the only way to do a similar (but not the same) thing is to set REACT_APP_API_URI
var on build
CI step. But, in this case, the value will be compiled
into docker container and I will not be able to override it by passing -e
option to docker run
command.
To somehow deal with it I have to build two actually the same containers but with different REACT_APP_API_URI
values but it is not convenient and violates actually 12 factors app principles.
I solved this problem by the way described in this article: https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/.
The solution from the article gave me only one container and the possibility to override env variables by using -e
option.
Describe the solution you'd like
Why you can't just add some similar functionality in form of a build option, plugin, or probably official tool which gives us a standard way to override env vars from outside?
Additional context
I'm not a frontend developer, so sorry if I'm missing something