π§ͺ Micro Frontend POC Using Vite Federation
In this proof of concept, I explored building a micro frontend architecture using multiple frameworks, all integrated via Vite Federation. The goal was to demonstrate how different technologies can coexist and communicate within a single host application.
π§± Architecture Overview
- Host Application: Built with React, serving as the shell and orchestrator.
- Cart Micro Frontend: Developed using Angular.
- Product Listing Component: Built with Vue.js.
- Payment Micro Frontend: Another React application.
Each micro frontend is independently developed, built, and deployed, yet seamlessly integrated into the host using Vite Federation.
π Communication Between Micro Frontends
To enable data sharing and event handling across micro frontends, I implemented a custom event bus. This allowed components from different frameworks to:
- Emit and listen to events (e.g., cart updates, product selections).
- Share state like selected products or payment status.
This decoupled communication model ensures that each micro frontend remains autonomous while still collaborating effectively.
βοΈ Vite Federation Setup
The most crucial part of this setup is the vite.config.js
file. It defines:
- Remote entries for each micro frontend.
- Shared dependencies.
- Federation configuration for exposing and consuming modules.
Note: In Vite Federation, you must build each micro frontend before it can be accessed by the host. This is because the
remoteEntry.js
file is only generated during the build process.
To preview each micro frontend independently, use:
npm run build
npm run preview
This limitation is important to keep in mind during development and testing.
π Key Takeaways
- Micro frontends can be built using different frameworks and still work together smoothly.
- Vite Federation simplifies module sharing and integration.
- Event-driven communication is a powerful pattern for decoupling micro frontends.
- Proper configuration in
vite.config.js
is essential for federation to work. - Build-before-use is a current limitation of Vite Federation.
π Project Structure
Mirco_FrontEnd/
βββ host/ # React Host Application (Port 3000)
β βββ src/
β β βββ App.jsx # Main host component with shared state
β β βββ App.css # Host styling
β β βββ main.jsx # React entry point
β βββ package.json
β βββ vite.config.js # Module Federation configuration
β βββ index.html
βββ product-app/ # Vue.js Product Application (Port 3001)
β βββ src/
β β βββ App.vue # Vue product component
β β βββ main.js # Vue entry point
β βββ package.json
β βββ vite.config.js # Exposes ./App component
β βββ index.html
βββ cart/ # Angular Cart Application (Port 3002)
β βββ src/
β β βββ app.component.ts # Angular cart component
β β βββ app.component.css # Angular styling
β β βββ main.ts # Angular entry point
β βββ package.json
β βββ vite.config.js # Exposes ./App component
β βββ tsconfig.json # TypeScript configuration
β βββ index.html
βββ payment/ # React Payment Application (Port 3003)
β βββ src/
β β βββ App.jsx # Payment processing component
β β βββ App.css # Payment styling
β β βββ main.jsx # React entry point
β βββ package.json
β βββ vite.config.js # Exposes ./App component
β βββ index.html
βββ setup.sh # Automated setup script
βββ Readme.md # This file
Core repo:- https://github.com/Ashutoshsarangi/micro-front-end (POC video added in the readme file)
Note:- In my final application draft, I changed all the components to React, So I can play around more.
Top comments (4)
Really cool POC! π₯ Love how you mixed React, Angular, and Vue in a single micro frontend setup with Vite Federation. The event bus approach for cross-framework communication is super clean β makes the whole architecture feel modular and future-proof.
Thank you, ALI.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.