Skip to content

Ability to override env vars from outside of application (container) #9965

Open
@rtemb

Description

@rtemb

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:

  1. My app uses REACT_APP_API_URI env var which stores the path to back-end API.
  2. On CI pipeline I have a build step which builds my js code to a compressed production version.
  3. 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.
  4. Now I have two environmentsStaging and Production. 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions