This repository is to showcase examples of how Webpack 5's new Module Federation can be used.
| If you need support, consider looking at my sponsor profile https://github.com/sponsors/ScriptedAlchemy | For companies that require consultations, contact me on twitter or email (on github profile) |
|---|---|
| Youtube Screencasts | https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ |
| Info site | https://module-federation.github.io/ |
| Official Docs | https://webpack.js.org/concepts/module-federation |
| Original Webpack Issue | https://github.com/webpack/webpack/issues/10352 |
| Medium post | https://link.medium.com/xzFgBBtAx6 |
| JSNation Presentation | https://github.com/sokra/slides/blob/master/content/ModuleFederationWebpack5.md |
| Post about Dynamic Remotes | https://h3manth.com/posts/dynamic-remotes-webpack-module-federation/ |
# Examples
Legend:
⚠️ : In Progress/Incomplete- 🔒: Depends on access controled source
- 💰: commercially avaliable
- Native Federation — Module Federation using esBuild, ESM, Import Maps. Concept ported to other bundlers!!
- Native Federation React — React Example of Module Federation using esBuild, ESM, Import Maps. Concept ported to other bundlers!!
- Advanced API — Showcasing advanced API use, also seen in other examples.
- Basic Host-Remote — App 1 consumes remote components from App2.
- Create React App — Module Federation using CRA.
- HMR Remotes — Hot Reloading Remotes inside Hosts.
- Startup Code — Advanced implementation that attaches initialization code to the remote container itself. Useful for dynamically setting publicPath in the remote.
- Bi-Directional Hosts — App1 consumes App2 components; App2 consumes App1 components.
- Self-Healing — Fallback to remote apps vendors if a dependency fails to load.
- Server-Side Rendering — App1 and App2 with SSR.
- Server-Side Rendering (simplified) — Less complex boilerplate.
- Multi UI Framework Federation — Multiple Apps in different technologies federated.
- Dynamic System Host — Swap between remotes at runtime.
- Redux Reducer Injection — Dynamically inject reducers to host store at runtime.
- Shared Routes — Compose federated routes for a seamless user experience.
- Nested Components — Nested remote components.
- Share Context Provider — App1 and App2 with shared Context Provider.
- Federation Dashboard Example — Single example implementing Module Federation Dashboard
- 🔒 Streaming Federated Code — App1 and federated-middleware deploy to s3. App1 then stream's federated code directly from S3.
- Non-UI Module
- Routing — An example of sharing router context. Also worth looking at - Routing 2
- Version Discrepancy — Federated apps depending on different versions of a dependency without side-effects.
- TypeScript — Streaming TypeScript between module-federation apps.
- Angular Universal — Remote and Host app with SSR, lazy modules and components.
- NextJS Sidecar Build — Sidecar build to enable module-federation alongside Next codebases.
- NextJS — Operation, with nextjs-mf.
- 💰NextJS SSR — Powered by software streams, with nextjs-ssr
- Building A Plugin-based Workflow Designer With Angular and Module Federation — External Example
- Vue.js — Simple host/remote (render function / sfc) example using Vue 3.0.
- Vue 2 in Vue 3 — Vue 3 application loading remote Vue 2 component.
- Vue2 SSR — This example demonstrates module as a service.
- React - Host/Remote and NextJS Host/Remote — These examples demonstrates react/nextjs as host/remote and react/nextjs are host/remote
- Different React Versions in Isolation — Simple host/remote example where the apps have different React and ReactDOM versions and don't share any dependencies.
- CSS Isolated Host and Remote — Example on how to prevent CSS from leaking between federated applications.
- vue3-demo-federation-with-vite — wepack and vite federation integrated projects, webpack/vite both play the role of host and remote
| 1 Hour group consultation | $100 |
|---|---|
| 30 Min 1:1 consultation | $60 |
| 15 Min 1:1 consultation | $30 |
| Bespoke API modifications and hands on code | $300-$500/hr |
To run from a git checkout locally, remove all of the proprietary example directories and then run yarn at the repo root.
You can then run yarn && yarn start from any of the non-proprietary examples.
Module federation will work with any type of file that youre able to import, that Webpack understands how to process. It is not a JS only, or React only feature. Images, CSS, JSON, WASM, and anything else can be federated.
- Netflix
- Auth0
- Best Buy
- SAP
- AWS
- JPMorgan Chase
- Microsoft
- Lululemon
- Housing.com
- VMware
- Talkdesk
- Cricket Wireless
- Bytedance
- Rivian (in the cars themselves)
- Realtor.com
- FICO
- Digital Ocean
- Alibaba
- Tencent
- Wayfair
- RingCentral
- Indeed
- Telia
- Amazon
- Sony
- Paypal
- OVO Energy
- MGM
- Lowes
- Home Depot
- Epic Games
- ExpediaGroup
- Verizon
- MindTickle
- and many more I cant remember