Micro-frontends: Module Federation
Use Webpack Module Federation or Vite Federation to split a large frontend into independently deployed remotes consumed by a shell app.
Micro-frontends: Module Federation is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Are Micro-frontends?
Splitting a large frontend into independently developed and deployed pieces — typically one per team or business domain. Each piece can have its own framework, repo, deploy pipeline, even tech stack. A shell app glues them at runtime.
Why Micro-frontends?
Organisations with 10+ frontend teams hit limits: single repo bottleneck, slow build times, conflicting release schedules. Micro-frontends let teams ship independently — at the cost of more architectural complexity.
Module Federation — The Core Technique
Webpack Module Federation (Webpack 5, also Vite via plugin) lets a shell app import code from independently deployed remotes at runtime. The remote exposes specific modules; the shell consumes them.
Remote Configuration
The remote app exposes its modules via webpack config.
// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: { publicPath: 'https://product-team.example.com/' },
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductPage': './src/ProductPage',
'./productClient': './src/api/client'
},
shared: ['react', 'react-dom']
})
]
};Shell (Host) Configuration
The shell declares which remotes it imports.
// shell app: webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
product: 'productApp@https://product-team.example.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};Importing Remote Modules
Use dynamic import — webpack resolves it via the federation runtime.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Vite Federation
Vite supports Module Federation via the @originjs/vite-plugin-federation plugin — similar API.
// vite.config.ts
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [federation({
name: 'shell',
remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
shared: ['react', 'react-dom']
})]
};Shared Dependencies
List libraries like React in shared so they're not bundled twice. The federation runtime resolves the highest compatible version at runtime.
Independent Deployment
Each remote is its own build/deploy pipeline. The shell points to a URL — pushing a new remote rolls out to all consumers automatically.
Communication Between Apps
Don't share state via direct imports — use events (CustomEvent), a tiny shared bus, or postMessage. Keep boundaries clean to preserve independence.
Alternatives: iframes and Web Components
iframes: strongest isolation, awkward navigation/CSS. Web Components: native browser support, no framework lock-in but limited shared state. Module Federation balances isolation with developer experience.
Trade-offs
Wins: independent deploys, tech freedom, team autonomy. Costs: complex build setup, shared dependency conflicts, runtime errors hard to debug, increased bundle complexity. Only worthwhile for genuinely large orgs.
When to Avoid
Single-team projects, MVPs, sites with under 100 employees on frontend. The complexity tax is real — most teams should use a monorepo instead.
Quick Check
What does Webpack Module Federation enable in a micro-frontend architecture?
Recap: Micro-frontends
Split frontend by team/domain for independent deploys. Module Federation (webpack 5 / Vite plugin) — shell imports from remotes at runtime. Remote exposes modules; shell declares remotes; both share dependencies like react. Use events for cross-app communication. Complex — reserve for genuinely large orgs.
Frequently asked questions
Is the “Micro-frontends: Module Federation” lesson free?
Yes — the full text of “Micro-frontends: Module Federation” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Micro-frontends: Module Federation”?
Use Webpack Module Federation or Vite Federation to split a large frontend into independently deployed remotes consumed by a shell app. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Micro-frontends: Module Federation” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Atomic Design: Atoms Molecules Organisms
- Monorepo Setup with Turborepo
- Micro-frontends: Module Federation
- Feature-Based Folder Structure