A micro frontends sample implementation of The Tractor Store built with React, Webpack and Module Federation. It's based on the Blueprint.
Live Demo: https://tractor-store-react.pages.dev/
List of techniques used in this implementation.
| Aspect | Solution |
|---|---|
| 🛠️ Frameworks, Libraries | React, React-Router, Webpack |
| 📝 Rendering | SPA |
| 🐚 Application Shell | Webpack |
| 🧩 Client-Side Integration | Module Federation |
| 🧩 Server-Side Integration | None |
| 📣 Communication | Custom Events, HTML Attributes |
| 🗺️ Navigation | SPA, One MF per Team, history API routing |
| 🎨 Styling | Self-Contained CSS (No Global Styles) |
| 🍱 Design System | None |
| 🔮 Discovery | None |
| 🚚 Deployment | Static Page(Cloudflare Pages) |
| 👩💻 Local Development | Webpack |
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.
Clone this repository and use lerna to bootstrap the mono repo. Run the following commands:
npm installStart the development server:
npm run devOpen http://localhost:3000 in your browser to see the integrated application.
Alternatively, you can use the npm run serve command to serve the built application locally.
Kent Li is a software developer in China.
This sample code is released using the MIT license. For more information, see the LICENSE file.