NicoJuicy / module-federation-examples

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

Module Federation Examples

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

We are building a bigger ecosystem

Rspack
Modern.js
Garfish
Oxc
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)
Content
Youtube Screencasts	https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ
New Info site	https://module-federation.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/

https://module-federation.github.io/

https://www.youtube.com/playlist?list=PLWSiF9YHHK-DqsFHGYbeAMwbd9xcZbEWJ

https://scriptedalchemy.medium.com/

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.
• Create React App using React App Rewired — Module Federation using CRA and React App Rewired.
• 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.
• Dynamic Remotes in Node — Dynamically load remotes in Node.
• 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.
• Medusa Example — Single example implementing Module Federation Dashboard
• 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 v13 — Operation, with nextjs-mf.
• NextJS SSR — Powered by software streams, with nextjs-ssr
• NextJS SSR via Delegates — Custom glue code for containers and hosts 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
• quasar-cli-vue3-webpack-javascript — Module federation integration with Quasar apps running vue3 using quasar-cli (javascript)
• UMD Federation — Support importing umd remote module
• Modernjs — Basic Module Federation Usage in Modern.js Framework
• Modernjs Medusa — Using Medusa in Modern.js Framework

Module Federation Examples covered by e2e tests with Cypress framework, more info about structure and configuration 👉 here 👈

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.

Consultations

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

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 understands how to process. It is not a JS only, or React only feature. Images, CSS, JSON, WASM, and anything else can be federated.

Companies using Module Federation

• Netflix
• Auth0
• Best Buy
• SAP
• AWS
• SemRush
• Ford Motor Company
• JPMorgan Chase
• Microsoft
• Lululemon
• Housing.com
• VMware
• Talkdesk
• Cricket Wireless
• Reddit
• Bytedance
• Rivian (in the cars themselves)
• Realtor.com
• FICO
• Digital Ocean
• Alibaba
• Tencent
• Wayfair
• RingCentral
• Indeed
• Telia
• Beamery
• Amazon
• Sony
• Paypal
• OVO Energy
• MGM
• Lowes
• Home Depot
• Epic Games
• ExpediaGroup
• Verizon
• MindTickle
• Experian
• Herodevs
• CloudFlare
• Cisco
• Business Insider
• Box.com
• AfterPay
• OLX
• Shopify
• adidas
• and many more I cant remember

Contribution to this repo

You decided to contribute to this project? Great, thanks a lot for pushing it!