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/
List of Examples
Click here to see the detailed list of examples in this repo Full Examples List
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
- 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!
