Vite + Module Federation Micro-Frontend E-Commerce

A modern micro-frontend e-commerce application built with Vite, Module Federation, React 18, and TypeScript.

🚀 Architecture Overview

This application demonstrates a production-ready micro-frontend architecture with:

• True Module Federation: Direct component sharing without iframes
• Independent Development: Each MFE can be developed and deployed separately
• Shared State Management: Event-driven communication between MFEs
• Modern Tooling: Vite for fast development and builds
• Type Safety: Full TypeScript support across all MFEs

📁 Project Structure

vite-react-mfe/
├── shell-app/           # Host application (routing, layout, global state)
├── product-mfe/         # Product catalog and management
├── cart-mfe/           # Shopping cart functionality
├── payment-mfe/        # Payment processing and checkout
├── profile-mfe/        # User profile management
└── shared/             # Shared types, utilities, and event bus

🏗️ MFE Responsibilities

Shell App (Host) - Port 5000

• Application routing and navigation
• Global cart state management
• Shared layout (Header, Footer)
• Event orchestration between MFEs
• Dynamic MFE loading with Module Federation

Product MFE - Port 5001

• Product catalog display
• Product search and filtering
• Add to cart functionality
• Responsive product grid

Cart MFE - Port 5002

• Shopping cart display
• Quantity management
• Item removal and updates
• Price calculations

Payment MFE - Port 5003

• Order review and summary
• Payment form handling
• Payment processing (mocked)
• Order confirmation

Profile MFE - Port 5004

• User profile display
• Personal information management
• Address and preferences
• Account statistics

🛠️ Technology Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite 4
• Module Federation: @originjs/vite-plugin-federation
• Routing: React Router v6
• State Management: Event-driven architecture
• Styling: CSS Modules with modern CSS
• Package Management: npm workspaces

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Git

Installation

1. Clone and install dependencies

git clone <repository-url>
chmod +x setup.sh
./setup.sh

Or manually:

npm run install:all

2. Build and start all MFEs

npm run preview:all

This will:

• Build all MFEs for production
• Start them in preview mode on their respective ports
• Enable Module Federation between MFEs

3. Access the application Open http://localhost:5000 in your browser

Development Mode (Alternative)

For development with hot reload (note: Module Federation works better in preview mode):

npm run dev

Individual MFE Development

You can also build and preview individual MFEs:

# Build and preview specific MFE
cd product-mfe && npm run build && npm run preview
cd cart-mfe && npm run build && npm run preview
cd payment-mfe && npm run build && npm run preview
cd profile-mfe && npm run build && npm run preview
cd shell-app && npm run build && npm run preview

🔄 Communication Strategy

Event-Driven Architecture

MFEs communicate through a custom event bus system:

// Adding item to cart
CartEvents.addToCart(product, quantity);

// Updating cart quantity
CartEvents.updateQuantity(productId, newQuantity);

// Navigation between MFEs
NavigationEvents.navigate('/cart');

// Listening to cart changes
EventBus.subscribe('cart:state-changed', (cartState) => {
  // Handle cart state update
});

Event Types

• cart:add - Add item to cart
• cart:update - Update item quantity
• cart:remove - Remove item from cart
• cart:clear - Clear entire cart
• cart:state-changed - Cart state updated
• navigate - Navigation between routes

🏗️ Module Federation Setup

Each MFE exposes its main component through Module Federation:

// vite.config.ts example
federation({
  name: 'product-mfe',
  filename: 'remoteEntry.js',
  exposes: {
    './ProductApp': './src/ProductApp'
  },
  shared: ['react', 'react-dom']
})

The Shell App consumes these remote modules:

// Shell App vite.config.ts
federation({
  name: 'shell-app',
  remotes: {
    productMfe: 'http://localhost:5001/assets/remoteEntry.js',
    cartMfe: 'http://localhost:5002/assets/remoteEntry.js',
    // ... other remotes
  }
})

🎨 Features

Modern UI/UX

• Responsive design for all screen sizes
• Smooth animations and transitions
• Professional gradient themes
• Interactive components

Performance Optimizations

• Code splitting with Module Federation
• Lazy loading of remote components
• Optimized bundle sizes
• Fast development with Vite HMR

Developer Experience

• Full TypeScript support
• Shared type definitions
• Error boundaries for MFE failures
• Hot module replacement
• Workspace-based development

🔧 Development Commands

# Install all dependencies
npm run install:all

# Start all MFEs in development
npm run dev

# Start individual MFEs
npm run dev:shell
npm run dev:product
npm run dev:cart
npm run dev:payment
npm run dev:profile

# Build all MFEs for production
npm run build

# Preview production builds
npm run preview

🏭 Production Deployment

Each MFE can be deployed independently:

1. Build the MFE

cd product-mfe
npm run build

2. Deploy the dist folder to your hosting service

3. Update remote URLs in the Shell App's vite.config.ts

4. Deploy Shell App with updated remote URLs

🔍 Key Advantages

vs. iframe-based MFEs

• Better Performance: No iframe overhead
• Shared Dependencies: Reduced bundle sizes
• Better UX: Seamless navigation and interactions
• SEO Friendly: Single-page application benefits

vs. Webpack Module Federation

• Faster Builds: Vite's esbuild-powered development
• Modern Tooling: Native ES modules support
• Better DX: Instant HMR and fast startup

🛡️ Error Handling

• Error Boundaries: Each MFE wrapped in error boundaries
• Graceful Degradation: Fallback UI when MFEs fail to load
• Event Error Handling: Try-catch blocks around event dispatching
• Network Resilience: Retry mechanisms for failed module loads

📊 Monitoring

The application includes built-in monitoring for:

• MFE load times and failures
• Event communication patterns
• User interaction flows
• Performance metrics

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

---

Built with ❤️ using Vite + Module Federation