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 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

Legend:

• ⚠️: In Progress/Incomplete
• 🔒: Depends on proprietary code that isn't free.

• 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.link to Google!
• Share Context Provider — App1 and App2 with shared Context Provider.
• 🔒 Streaming Federated Code — App1 and federated-middleware deploy to s3. App1 then stream's federated code directly from S3
• Non-UI Module
• Routing
• Version Discrepancy — Federated apps depending on different versions of a dependency without side-effects.
• TypeScript — Simple host/remote example using TypeScript.
• NextJS