Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable runtime configuration #2475

Merged
merged 3 commits into from
Oct 28, 2024
Merged

Enable runtime configuration #2475

merged 3 commits into from
Oct 28, 2024

Conversation

jake-low
Copy link
Contributor

@jake-low jake-low commented Oct 22, 2024

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:

  • Environment variables from .env are no longer injected into the JS code at build time. Instead, they're emitted into a separate env.json file.
  • The Docker container dumps any environment variables beginning with REACT_APP_ into this env.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.
  • The client JS code fetches /env.json and assigns it to window.env before bootstrapping the app. Application code uses window.env.VAR_NAME to access configuration variables (instead of process.env or import.meta.env). A preload hint is used to make sure that env.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).

Base automatically changed from jlow/vite to main October 23, 2024 04:57
@jake-low jake-low marked this pull request as ready for review October 23, 2024 05:09
@jake-low jake-low merged commit 2717114 into main Oct 28, 2024
5 of 6 checks passed
@jake-low jake-low deleted the jlow/runtime-config branch October 28, 2024 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants