Micro Frontend Shell with Module Federation
An architectural shell that hosts completely independent frontend modules at runtime via Webpack Module Federation. The shell and its modules are unaware of each other, deployable separately, and configurable per tenant — no shared build pipeline required.
As the frontend codebase grew, the monolithic UI became a bottleneck: any change triggered a full rebuild, teams were stepping on each other, and deploying one feature meant deploying everything. The answer was a proper micro frontend architecture built on Webpack Module Federation.
The shell is a Next.js/React host application that knows nothing specific about the modules it loads. Each module is an independently built and deployed React app, exposed as a remote entry via Module Federation. At runtime the shell fetches the remote entry and mounts the module — no shared build pipeline, no compile-time coupling beyond a versioned interface contract.
Each module is developed, tested, and deployed in its own repository. The shell is configured per tenant: which modules to expose, which routes to register, which roles have access — all driven by configuration, not code changes in the shell itself.
The result is a setup where a new product feature can be built as its own repo, deployed independently, and appear in the shell on the next load. Teams ship without coordination overhead. The shell stays stable regardless of what any individual module does.
A C# backend handles configuration storage and shared API concerns. The full stack runs through Docker containers, deployed via an Gitlab Pipeline to OpenShift Containers.