Module Federation Examples
This repository is to showcase examples on Webpack 5's new Module Federation can be used.
If you need support, consider looking at my sponsor profile https://github.com/sponsors/ScriptedAlchemy
Youtube Screencasts https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ
WIP info site https://module-federation.github.io/
Official Docs https://webpack.js.org/concepts/module-federation
Shim for partial Webpack 4 and non webpack users (needs update to work with 5.beta.17) https://gist.github.com/ScriptedAlchemy/d386a094832dbd9a04324862d26570e9
Original Webpack Issue https://github.com/webpack/webpack/issues/10352
Medium post Original Webpack Issue https://link.medium.com/xzFgBBtAx6
JSNation Presentation https://github.com/sokra/slides/blob/master/content/ModuleFederationWebpack5.md
Check out our book
Examples
Legend:
⚠️ : In Progress/Incomplete- 🔒: Depends on proprietary code that isn't free.
- Advanced API — showcasing advanced API use, also seen in other examples
- Basic Host-Remote — App 1 consumes remote components from App2.
- 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. - 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 — Simple host/remote example using TypeScript.
-
⚠️ 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 workarounds. Currently standing as an open pull requrest - Building A Plugin-based Workflow Designer With Angular and Module Federation — External Example
Notes
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 start
from any of the non-proprietary examples.