Module Federation Examples

This repository is to showcase examples on Webpack 5's new Module Federation can be used.

Check out our book

Consultations

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.
• 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 (Broken because of @loadable/component - check readme in demo.
• 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. v10 will support async
• 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.

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.

Module federation will work with any type of file that youre able to import, that webpack underestands how to process. It is not a JS only, or react only feature. Images, CSS, JSON, WASM, and anything else can be federated.