Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/florianrappl/module-federation-tractor-v2
The Tractor v2 implemented with micro frontends using Module Federation (v1 and v2; Vite, rspack and Webpack).
https://github.com/florianrappl/module-federation-tractor-v2
demo microfrontends module-federation
Last synced: 10 days ago
JSON representation
The Tractor v2 implemented with micro frontends using Module Federation (v1 and v2; Vite, rspack and Webpack).
- Host: GitHub
- URL: https://github.com/florianrappl/module-federation-tractor-v2
- Owner: FlorianRappl
- Created: 2024-07-23T21:47:13.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-07-24T07:22:46.000Z (3 months ago)
- Last Synced: 2024-10-05T06:41:09.015Z (about 1 month ago)
- Topics: demo, microfrontends, module-federation
- Language: JavaScript
- Homepage: https://module-federation-tractor-v2.florian-rappl.de
- Size: 617 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Module Federation Demo · [](https://github.com/FlorianRappl/module-federation-tractor-v2/blob/main/LICENSE) [](https://discord.gg/kKJ2FZmK8t)
> The Tractor v2 Micro Frontends Sample using Module Federation with different bundlers
:zap: Combine multiple micro frontends built with different technologies - but all using Module Federation.
Feel free to play around with the code using StackBlitz.
[](https://stackblitz.com/github/florianrappl/module-federation-tractor-v2)
A micro frontends sample implementation of [The Tractor Store](https://micro-frontends.org/tractor-store/) built with Module Federation and React. It's based on the [Blueprint](https://github.com/neuland/tractor-store-blueprint).
**Live Demo:** [module-federation-tractor-v2.florian-rappl.de](https://module-federation-tractor-v2.florian-rappl.de/)
## About This Implementation
### Technologies
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] |
[React]: https://react.dev/
[ModuleFederation]: https://www.module-federation.io/
[rspack]: https://rspack.dev/
### Limitations
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.
### Performance
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](https://picard.js.org/) with Native Federation ended up at 88/100. Using a full framework like [Piral](https://www.piral.io) (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.
## How to run locally
### Installation
Clone this repository. Then run the following command inside the repository:
```sh
./setup.sh
```
### Running the Code
Now you can run all micro frontends:
```sh
./run.sh
```
Open http://localhost:1234 in your browser to see the integrated application.
## About The Authors
[smapiot](https://smapiot.com/) 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](https://www.piral.io) framework and the [Picard.js](https://picard.js.org) library.
## License
Piral and this sample code is released using the MIT license. For more information see the [license file](./LICENSE).