anish2690 / module-federation-examples

Implementation examples of module federation , by the creators of module federation

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

	We will be actively updating this book over the next year as we learn more about best practices and what issues people are running into with Module Federation, as well as with every release of Webpack as it moves towards a release candidate and release. So with your one purchase you are buying a whole year of updates.

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.
• 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 — 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 && yarn start from any of the non-proprietary examples.