One build, every environment: runtime configuration for micro frontends
Look at your pipeline. If it builds staging and production separately from the same commit, you are shipping an artifact nobody tested. You tested the staging one. Most of the time this is fine, right up until the day it is not — a variable spelled differently in one environment, a flag that defaulted the other way, a bundle that behaved because of something only the staging build had. The bug…
In software development, building separate versions for each environment can lead to wastefulness and complications when working with micro frontends. If a build only tests the staging environment, it may not catch issues that only arise in production, such as variable spelling differences, default flag behavior, or bundle behavior dependent on the build environment. This can cause bugs to appear only in production, making troubleshooting more challenging as the initial response is "it works on staging."
To address these issues, runtime configuration can be implemented, avoiding the need for separate builds for each environment. Instead, the application asks for environment-specific values at startup and receives them in a small JSON document. This approach ensures that the bundle remains identical across all environments, as the only difference is the configuration document. This approach allows for a single, identical artifact to be tested by CI and served to all environments, reducing build waste and potential failures.
The browser fetches this configuration document early in the boot sequence, allowing the application to use it before rendering starts. Keeping the response small and the cache short ensures that the configuration does not interfere with the first paint and can be updated without negatively impacting the user experience. Secrets should remain on a server, as values shipped to the client are considered public.
Implementing runtime configuration is possible with popular bundlers like Vite and Webpack, as the change primarily involves switching from reading environment variables at module scope to fetching values at runtime. Even in Module Federation setups, the configuration can still be achieved by keeping remote names at build time and loading URLs from the same configuration document.
This approach allows for a single build per environment, enabling quick rollbacks and reducing the time and effort needed to revert to a previous version when needed.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
