adan-ea/micro-frontend

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

• advanced-apis -- ✅ rspack | ✅ webpack
  More Examples using advanced apis or concepts
  • automatic-vendor-sharing -- ✅ rspack | ✅ webpack
    This example demos automatic-vendor-sharing, each host/remote will share all vendors possible
  • dynamic-remotes -- ✅ rspack | ✅ webpack
    Basic demo of a host app loading remote components and dynamically sharing vendor code with unknown remotes, or without a Federation Plugin
• angular-universal-ssr -- ❌ rspack | ✅ webpack
  Angular Universal SSR with Module Federation
• angular11-microfrontends-ngrx -- ❌ rspack | ✅ webpack
  Module Federation with Angular 11, featuring shared modules and NgRx
• angular11-microfrontends-ngxs -- ❌ rspack | ✅ webpack
  Module Federation with Angular 11, featuring shared modules and NGXS.
• angular14-react -- ✅ rspack | ✅ webpack
  Module Federation for Angular 14 and React 18 apps, with NGXS state management and shared state between Angular and React modules.
• angular15-microfrontends-lazy-components -- ❌ rspack | ✅ webpack
  Module Federation with Angular 15, featuring shared modules and NGXS state management
• angular15-vue3 -- ✅ rspack | ✅ webpack
  This project shows an example of using Webpack 5 Module Federation with Angular 15 using Vue 3 components from remote.
• apollo-client -- ❌ rspack | ✅ webpack
  This example demonstrates using Apollo Client with Module Federation.
• basic-host-remote
  Basic Host and Remote Example
• bi-directional
  Basic Bi-directional Federation application
• cloud -- ❌ rspack | ✅ webpack
  Various Cloud based Examples
• complete-react-case -- ✅ rspack | ✅ webpack
  A complete Module Federation Case with React.
• comprehensive-demo-react16 -- ✅ rspack | ✅ webpack
  Multi-framework comprehensive demo for React 16
• comprehensive-demo-react18 -- ✅ rspack | ✅ webpack
  Multi-framework comprehensive demo for React 18
• cra -- ✅ rspack | ❌ webpack
  Create React app Running with rsbuild
• cra-react-app-rewired
  CRA with react-app-rewired
• css-isolation -- ✅ rspack | ✅ webpack
  Demonstration of CSS isolation between host and remote apps using Shadow DOM with Module Federation. Features 'app1' (host) loading 'app2' (remote) for CSS-isolated components.
• different-react-versions -- ✅ rspack | ✅ webpack
  This example demos the ability to load two separate versions of react (v16.6.3 and v16.13.1).
• different-react-versions-16-17 -- ✅ rspack | ✅ webpack
  This example demos the ability to load two separate versions of react (16 & 17).
• different-react-versions-16-17-typescript -- ✅ rspack | ✅ webpack
  TypeScript example demos the ability to load two separate versions of react.
• different-react-versions-16-18 -- ✅ rspack | ✅ webpack
  Two apps, one using React 16 and the other using React 18
• different-react-versions-isolated -- ✅ rspack | ✅ webpack
  This example demos host and remote applications running in isolation with two different React versions and no shared libraries
• different-react-versions-typescript -- ❌ rspack | ✅ webpack
  No description
• dynamic-remotes-node -- ❌ rspack | ✅ webpack
  Dynamic Remotes on server side with Node Federation
• dynamic-system-host -- ✅ rspack | ✅ webpack
  Runtime API based Dynamic Remote Loading
• federated-css-mono -- ✅ rspack | ✅ webpack
  Examples Federating Styles
  • consumers-nextjs -- ❌ rspack | ✅ webpack
    NextJs apps consumes exposed components in different combinations.
  • consumers-react -- ❌ rspack | ✅ webpack
    React apps consumes exposed components in different combinations.
  • expose-remotes -- ✅ rspack | ✅ webpack
    apps exposes components with a different types of components styling
• federated-css-react-ssr -- ❌ rspack | ✅ webpack
  Example of server side rendering with module federation using React 18 and different types of component styling
• federated-library-from-cdn -- ❌ rspack | ✅ webpack
  Basic example of two applications that share the same library served from a CDN.
• frontend-discovery-service -- ❌ rspack | ✅ webpack
  Demonstrates running Micro Frontends with Module Federation and Frontend Service Discovery on AWS, including Blue/Green deployment for version updates.
• genesis
  Vue Genesis Example
• i18next-nextjs-react -- ❌ rspack | ✅ webpack
  Demonstrates using dedicated i18next instances in micro frontends, enabling language change in one that affects all.
• medusa-example -- ❌ rspack | ✅ webpack
  https://medusa.codes Demo
• modernjs
  Module Federation Example for ByteDance's Modern.js Framework.
• nested -- ❌ rspack | ✅ webpack
  Demonstration of loading nested remote components: 'app1' (host) async loads 'ButtonContainer' from 'app2', which in turn async loads 'Button' from 'app3'.
• nextjs-react -- ❌ rspack | ✅ webpack
  Module Federation with NextJS and Client-Side React Remotes
• nextjs-ssr -- ❌ rspack | ✅ webpack
  Server Side Rendering with Next.js
• nextjs-ssr-react-query -- ❌ rspack | ✅ webpack
  Server Side Rendering with Next.js and React Query
• nextjs-v12 -- ❌ rspack | ✅ webpack
  Next.js 12 Example
• nextjs-v13 -- ❌ rspack | ✅ webpack
  Next.js 13 Example
• quasar
  Quasar Framework Example
• react-16-17-18-ssr -- ❌ rspack | ✅ webpack
  React 16, 17, 18 SSR
• react-18-code-splitting -- ❌ rspack | ✅ webpack
  React 18 Code Splitting
• react-18-server-2-server -- ❌ rspack | ✅ webpack
  Server 2 Server React 18
• react-ssr -- ❌ rspack | ✅ webpack
  React 18 SSR
• react-in-vue -- ❌ rspack | ✅ webpack
  Demo of fetching a React component in a Vue app via Module Federation, showcasing two-way communication and lifecycle management.
• react-hmr -- ❌ rspack | ✅ webpack
  LiveReload with a React app
• react-storybook
  Storybook Example
• redux-reducer-injection -- ❌ rspack | ✅ webpack
  Sharing a Redux store across remote apps with dynamic reducer injection; 'app1' hosts and creates the store, 'app2' injects its reducer.
• rspack_webpack -- ✅ rspack | ✅ webpack
  Webpack Host with Rspack Remotes: App #1 as Webpack, Apps #2-#5 as Rspack, with coexisting webpack commands.
• rspack_offload -- ✅ rspack | ✅ webpack
  Speed up Webpack by offloading some workload to rspack
• runtime-plugins -- ✅ rspack | ✅ webpack
  Runtime Plugin Examples for Module Federation 1.5
  • control-sharing -- ✅ rspack | ✅ webpack
    Control Sharing Panel. Lets you change share resolver in the app via GUI
• rust-wasm -- ❌ rspack | ✅ webpack
  Using Module Federation to federate Wasm modules across independent applications. In this demo, we will use Conways Game of Life to illustrate how Wasm can be shared.
• self-healing -- ❌ rspack | ✅ webpack
  This example demos self-healing capabilities with Module Federation. app2 depends on and is expecting a shared dependency to be provided in app1.
• server-side-render-only -- ❌ rspack | ✅ webpack
  Module Federation Server Side Rendering, no client side implementation
• server-side-rendering -- ❌ rspack | ✅ webpack
  Example of server side rendering with module federation using React 18 and Suspense
  • server-side-rendering_shell -- ❌ rspack | ✅ webpack
    React 18 architecture at scale with module federation
• shared-context -- ❌ rspack | ✅ webpack
  This example demos a host application wrapped in a ContextProvider and renders a remote component consuming the ContextProvider value.
• shared-routes2 -- ❌ rspack | ✅ webpack
  This example demos two applications with their own sets of routes and deployments but a seamless experience for the user.
• shared-routing -- ❌ rspack | ✅ webpack
  This example demos a basic host application loading remote component.
• shared-store-cross-framework -- ❌ rspack | ✅ webpack
  This example demos a Vue3 in React application which shares the same store.
• simple-node -- ❌ rspack | ✅ webpack
  Node.js Examples
• 013-styled-components -- ❌ rspack | ✅ webpack
  This sample shows how to use Styled Components with MF and React SSR.
• third-party-scripts -- ❌ rspack | ✅ webpack
  This example demos a basic host-remote application with third-party remotes or vendor code.
• typescript-repo -- ❌ rspack | ✅ webpack
  This example demos a basic host/remote application with TypeScript and also streams types.
• typescript-monorepo -- ❌ rspack | ✅ webpack
  This example demos a basic host/remote application with TypeScript using yarn workspaces and using typesVersions
• typescript-project-references -- ❌ rspack | ✅ webpack
  This example demos a basic host/remote application with TypeScript using Project References.
• typescript-react-fallback -- ❌ rspack | ✅ webpack
  This example demos a basic host/remote application with TypeScript using [Project References], to show how to render another remote as a fallback if a remote fails to render.
• ts-monorepo
  This example demos a basic host/remote application with TypeScript and also streams types.
• typescript-react-monorepo-test
  This example demos a basic host/remote application with TypeScript and also streams types.
• umd-federation -- ❌ rspack | ✅ webpack
  UMD output target for Module Federation
• vite-react-microfrontends
  Vite React Microfrontends
• vite-react-simple -- ❌ rspack | ✅ webpack
  Vite & Webpack React Simple
• vite-svelte-microfrontends
  Svelte Vite Based Microfrontends
• vite-vue-microfrontends
  Vue Vite Based Microfrontends
• vue-cli
  Vue CLI Examples
• vue2-in-vue3 -- ❌ rspack | ✅ webpack
  This example demos a vue3 application loading remote vue2 component.vue3 app depends on a component exposed by vue2 app.
• vue3-cli-demo
  Vue 3 using vue-cli OR rsbuild
• vue3-demo -- ❌ rspack | ✅ webpack
  This example demos consumption of federated modules from a Webpack bundle. layout app depends on a component exposed by home app.
• vue3-demo-federation-with-vite -- ❌ rspack | ✅ webpack
  This project is a mix of webpack-federation and vite-federation

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

The examples in this repository leverage pnpm and workspaces. To run from a git checkout locally, remove all of the proprietary example directories, ensure you have pnpm installed and run install pnpm i at the repo root. You can then run pnpm start from any of the non-proprietary examples. Some examples may use a different command such as "dev" or "serve".

Module federation will work with any type of file that you're 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!