Decomposing Monoliths: A Practical Guide to Micro-Frontends with Module Federation

Decomposing monolithic frontend applications is essential when scaling corporate engineering organizations. As products grow, compile times increase and merge conflicts slow down development cycles. Splitting the client codebase into independently deployable apps (micro-frontends) solves this by decoupling features.

1. Conceptual Framework & Runtime Integration

Unlike build-time composition (using npm package imports, which require rebuilding the container for every change), micro-frontends use runtime composition. Module Federation allows a host application to dynamically load compiled remote modules over HTTP. This setup isolates build processes, allowing different squads to deploy separate features independently.

2. Configuring Module Federation in Webpack

To share components between a host and remote application, configure the plugin inside your compiler settings. Here is a Webpack configuration block for a remote module sharing a product catalog dashboard:

// remote webpack.config.js

module.exports = { plugins: [ new ModuleFederationPlugin({ name: "catalogRemote", filename: "remoteEntry.js", exposes: { "./CatalogComponent": "./src/components/CatalogComponent.tsx", }, shared: { react: { singleton: true, requiredVersion: "^18.0.0" }, "react-dom": { singleton: true, requiredVersion: "^18.0.0" }, }, }), ], }; ```

3. Importing Remote Components in the Host App

Inside the host app, remote components are imported dynamically using React's lazy loading API, wrapped in Error Boundaries to handle remote server offline states:

const RemoteCatalog = React.lazy(() => import('catalogRemote/CatalogComponent'));

export default function HostContainer() { return ( <div className="host-shell"> <h2>Enterprise Portal Shell</h2> <Suspense fallback={<div>Loading remote dashboard...</div>}> <RemoteCatalog /> </Suspense> </div> ); } ```

4. Shared State Coordination

To share state across micro-frontends without tight coupling, developers use Custom Events or custom Redux/Zustand slice micro-configurations. An event-driven architecture allows applications to communicate while remaining completely decoupled.