Dynamic Remotes

[FaizanMuhammadSE]

I'm working with Microfrontends (MFEs) using React + Vite + vite-federation-plugin.

I have:

• A container (host) application
• Multiple MFEs, each bundled as a standalone Vite app and deployed as a Docker image.

Each MFE is built once and deployed to multiple environments (DEV, STAGE, PROD). The remoteEntry.js files are hosted at different base URLs depending on the environment.

❓ Challenge
In the container app, I need to define the remote MFE URLs like this:

remotes: {
    'fe-mfe-abc': `${env.VITE_ABC_BASE_URL}/assets/remoteEntry.js`,
    'fe-mfe-xyz': `${env.VITE_XYZ_BASE_URL}/assets/remoteEntry.js`,
}

But since VITE_ABC_BASE_URL changes per environment, I don't want to create separate builds of the container app for each environment.

🧠 Goal
How can I manage these dynamic base URLs efficiently without rebuilding the container app for every environment?