Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I've refactored the frontend Dockerfile and build process so that environment variables can now be injected into the app at container runtime (overriding any variables that were specified at build time e.g. in
.env
).This will allow us to build a single image to run both in staging and production (using env vars to override the parts of the configuration that differs). That'll allow us to build images in CI, simplifying deployment both for us and for third parties who run their own MapRoulette instances.
Under the hood, here's how it works:
.env
are no longer injected into the JS code at build time. Instead, they're emitted into a separateenv.json
file.REACT_APP_
into thisenv.json
file when it starts, before launching the web server process. A variable specified like this at runtime overrides whatever value was given at compile time./env.json
and assigns it towindow.env
before bootstrapping the app. Application code useswindow.env.VAR_NAME
to access configuration variables (instead ofprocess.env
orimport.meta.env
). A preload hint is used to make sure thatenv.json
is fetched early and doesn't delay the startup of the rest of the app more than necessary.Ultimately this means you can
docker run
the frontend container with e.g.-e REACT_APP_MAP_ROULETTE_SERVER_URL
to customize the URL that the app assumes it is running at, at runtime (without rebuilding the JS code or the container image). This allows the same container image to be built once and then deployed in different environments (staging, prod, third-party instances, etc).