The Tractor v2 Micro Frontends Sample using Module Federation with different bundlers
⚡ Combine multiple micro frontends built with different technologies - but all using Module Federation.
Feel free to play around with the code using StackBlitz.
A micro frontends sample implementation of The Tractor Store built with Module Federation and React. It's based on the Blueprint.
Live Demo: module-federation-tractor-v2.florian-rappl.de
List of techniques used in this implementation.
| Aspect | Solution |
|---|---|
| 🛠️ Frameworks, Libraries | React, ModuleFederation |
| 📝 Rendering | SPA |
| 🐚 Application Shell | rspack |
| 🧩 Client-Side Integration | Custom |
| 🧩 Server-Side Integration | None |
| 📣 Communication | Custom Events, Slots |
| 🗺️ Navigation | SPA, One MF per Team, history API routing |
| 🎨 Styling | Self-Contained CSS (No Global Styles) |
| 🍱 Design System | None |
| 🔮 Discovery | None |
| 🚚 Deployment | Static Page |
| 👩💻 Local Development | rspack |
This implementation is deliberately kept simple to focus on the micro frontends aspects. URLs are hardcoded, components could be more DRY and no linting, testing or type-safety is implemented. In a real-world scenario, these aspects should be addressed properly.
Several performance optimizations could still be applied, however, in the out-of-the-box state with three micro frontends and multiple components / pages included we'll end up with a lighthouse score of 100/100, which is great.
As a comparison a most lightweight SSR-only solution using the same codebase would be around 99/100. Another SPA sample that uses Picard.js with Native Federation ended up at 88/100. Using a full framework like Piral (which also includes a much cleaner codebase and a more powerful routing engine) ends up at 100/100, too. Hence, independent if you use only Module Federation or a micro frontend framework like Piral - a good solution should give optimal performance.
Clone this repository. Then run the following command inside the repository:
./setup.shNow you can run all micro frontends:
./run.shOpen http://localhost:1234 in your browser to see the integrated application.
smapiot is a growing company specialized in delivering IT solutions and services for the emerging space of digital transformation and IoT. smapiot was founded in 2014 and is located in Munich. We are the core maintainers of the Piral framework and the Picard.js library.
Piral and this sample code is released using the MIT license. For more information see the license file.