output.md

• module-federation-examples-root -- ✅ rspack | ✅ webpack
  Examples showcasing Webpack 5's Module Federation
  • 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.
  • federated-npm -- ✅ rspack | ✅ webpack
    Use Unpkg or esm.sh to retrieve all shared modules needed. Allowing you to access all of npm on demand
  • 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
    • backend-control -- ✅ 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