This repository is to showcase examples of how Webpack 5's new Module Federation can be used.
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/
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 ๐
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 |
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 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.
- Netflix
- Auth0
- Best Buy
- SAP
- AWS
- SemRush
- Ford Motor Company
- JPMorgan Chase
- Microsoft
- Lululemon
- Housing.com
- VMware
- Talkdesk
- Cricket Wireless
- 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
You decided to contribute to this project? Great, thanks a lot for pushing it!