The Tractor v2 Micro Frontends Sample using Piral with a Monorepo
⚡ A mono repository using Piral for micro frontends.
Feel free to play around with the code using StackBlitz.
A micro frontends sample implementation of The Tractor Store built with Piral and React. It's based on the Blueprint.
Live Demo: tractor-v2.samples.piral.cloud
List of techniques used in this implementation.
| Aspect | Solution |
|---|---|
| 🛠️ Frameworks, Libraries | React, Piral, esbuild |
| 📝 Rendering | SPA |
| 🐚 Application Shell | Piral |
| 🧩 Client-Side Integration | Piral Extension Components |
| 🧩 Server-Side Integration | none / (could render SSR, too) |
| 📣 Communication | Custom Events, Slots |
| 🗺️ Navigation | SPA, One MF per Team, Piral-based routing |
| 🎨 Styling | Self-Contained CSS (No Global Styles) |
| 🍱 Design System | None |
| 🔮 Discovery | Piral.Cloud |
| 🚚 Deployment | Static Page |
| 👩💻 Local Development | Piral |
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. Hence, Piral gives optimal performance - no effort needed.
Clone this repository. Then use lerna to bootstrap the mono repo. Make sure to have yarn (v1) installed for this.
Run the following command inside the repository:
yarn installNow you can run all micro frontends (so-called pilets):
yarn startThis is an alias for yarn watch:all.
Open http://localhost:1234 in your browser to see the integrated application.
Alternatively, run only a single pilet (e.g., the checkout-pilet):
name=checkout yarn watch:mfOr if you wan to, you can also run the app shell in isolation:
yarn watch:appsmapiot 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.
The Piral documentation page has a tutorial on this. Make sure to follow and understand the tutorial before going deep into this sample.
Piral and this sample code is released using the MIT license. For more information see the license file.