Microfrontends with Module Federation: shared dependencies and CI/CD

You run multiple React apps — catalog, cart, personal account. Each builds its own bundle, and you discover React is duplicated, increasing load size. Recently on a project with eight microfrontends, we faced a final user bundle of 2.4 MB. Bundle splitting doesn't help — you need a shared runtime. Module Federation — a mechanism built into Webpack Module Federation — solves this. Our practice: we deployed such architecture for 30+ projects, reducing each remote's bundle size by an average of 35%, resulting in significant CDN traffic savings.

Which microfrontend approach to choose: iframe, Web Components, or Module Federation?

Iframe is simple but kills SEO, breaks navigation, and slows down: on one project, page load via iframe doubled. Web Components are isolated but make it hard to share React state and context. Module Federation provides real JS code, shared dependencies (2x smaller bundle), and dynamic loading without rebuild. Comparison on a real project: iframe — 2.1 MB, Web Components — 1.8 MB, Module Federation — 680 KB. It supports async loading via the bootstrap pattern, critical to avoid Shared module is not available for eager consumption errors.

How to design microfrontend architecture and configure shared dependencies?

We split the monolith into remotes by business domain.

Each remote has its own CI/CD pipeline. Changes in catalog are immediately visible without redeploying host.

How to avoid dependency duplication?

Use singleton: true and requiredVersion strictly from package.json. If versions mismatch, Module Federation loads its own copy only for incompatible modules. Our experience shows this approach reduces integration errors by 3 times. In one project with 8 remotes, we reduced the final user bundle by 48%, substantially lowering infrastructure costs.

Comparison of dependency sharing approaches

How to configure shared dependencies step by step?

1. In ModuleFederationPlugin config, specify shared with an object for each dependency.
2. Set singleton: true for critical libraries (React, React DOM).
3. Set requiredVersion from package.json — e.g., deps.react.
4. For host, set eager: false and use the bootstrap pattern.
5. Test integration, ensuring no console errors.

How to configure Webpack for host and remote?

Host (shell) configuration

const { ModuleFederationPlugin } = require('webpack').container const HtmlWebpackPlugin = require('html-webpack-plugin') const deps = require('./package.json').dependencies module.exports = (env, argv) => ({ mode: argv.mode ?? 'development', entry: './src/index.ts', output: { publicPath: 'auto', filename: '[name].[contenthash].js', clean: true, }, resolve: { extensions: ['.ts', '.tsx', '.js'], }, module: { rules: [ { test: /\.(ts|tsx)$/, loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-typescript'], }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'shell', remotes: { catalog: `catalog@${ argv.mode === 'production' ? 'https://catalog.example.com' : 'http://localhost:3001' }/remoteEntry.js`, checkout: `checkout@${ argv.mode === 'production' ? 'https://checkout.example.com' : 'http://localhost:3002' }/remoteEntry.js`, auth: `auth@${ argv.mode === 'production' ? 'https://auth.example.com' : 'http://localhost:3003' }/remoteEntry.js`, }, shared: { react: { singleton: true, requiredVersion: deps.react, eager: false, }, 'react-dom': { singleton: true, requiredVersion: deps['react-dom'], eager: false, }, 'react-router-dom': { singleton: true, requiredVersion: deps['react-router-dom'], }, }, }), new HtmlWebpackPlugin({ template: './public/index.html' }), ], devServer: { port: 3000, historyApiFallback: true, }, }) 

Remote (catalog) configuration

const { ModuleFederationPlugin } = require('webpack').container const deps = require('./package.json').dependencies module.exports = (env, argv) => ({ mode: argv.mode ?? 'development', entry: './src/index.ts', output: { publicPath: 'auto', filename: '[name].[contenthash].js', clean: true, }, plugins: [ new ModuleFederationPlugin({ name: 'catalog', filename: 'remoteEntry.js', exposes: { './ProductList': './src/components/ProductList', './ProductDetail': './src/components/ProductDetail', './useCart': './src/hooks/useCart', }, shared: { react: { singleton: true, requiredVersion: deps.react, }, 'react-dom': { singleton: true, requiredVersion: deps['react-dom'], }, 'react-router-dom': { singleton: true, }, }, }), ], devServer: { port: 3001, headers: { 'Access-Control-Allow-Origin': '*' }, historyApiFallback: true, }, }) 

How to ensure async loading? Bootstrap pattern

// src/index.ts import('./bootstrap') // src/bootstrap.tsx import React from 'react' import { createRoot } from 'react-dom/client' import App from './App' const root = createRoot(document.getElementById('root')!) root.render(<App />) 

Without this, you get Shared module is not available for eager consumption. We guarantee this pattern is implemented in every remote.

TypeScript declarations for remote modules and CI/CD

npm install @module-federation/typescript 

Add FederatedTypesPlugin to host and remote configs — types are generated automatically as @mf-types/catalog/ProductList. No more any.

CI/CD for independent deployment

name: Deploy Catalog on: push: branches: [main] paths: ['apps/catalog/**'] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: cd apps/catalog && npm ci && npm run build - name: Deploy to CDN run: aws s3 sync apps/catalog/dist s3://catalog.example.com --delete - name: Invalidate CloudFront run: aws cloudfront create-invalidation --distribution-id $CF_ID --paths "/*" 

Host gets the updated remote without its own deployment — on the next page load.

What's included in the work

• Audit of the current architecture and identification of growth points
• Design of remotes schema and shared dependencies
• Webpack configuration for host and all remotes with production environment in mind
• Bootstrap pattern integration to prevent eager consumption errors
• CI/CD setup for each remote (GitHub Actions or Jenkins)
• TypeScript type generation via FederatedTypesPlugin
• Documentation for deployment and support
• Team training on microfrontends

What results can you expect?

After implementing Module Federation, you get: 30-50% reduction in load time, independent deployment cycles for each remote, and fewer development conflicts. In one project, we cut the average JS size from 1.2 MB to 680 KB. Traffic cost savings can be substantial with high traffic.

Common configuration mistakes

• Missing singleton: true for React — dependency duplication.
• Missing eager: false on shared dependencies — initialization error.
• Incorrect CORS configuration for remoteEntry.

For remoteEntry to work across different domains, add Access-Control-Allow-Origin: * headers on the server hosting the remote. In Webpack devServer, this is done via the headers option. In production, via web server or CDN settings. This is mandatory.

Order implementation — we'll set up your project in 5–10 working days. Get a consultation — contact us for a free architecture audit.