Micro Frontend Application

A modern micro frontend architecture built with Vite and Module Federation, featuring a Shell App, Todo App, and Wishlist App.

📋 Project Structure

microfrontend/
├── shell/           # Main shell application (host)
├── todo-app/        # Todo micro frontend
├── wishlist-app/    # Wishlist micro frontend
└── package.json     # Root package.json for managing all apps

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Install all dependencies:

   npm run install:all

   Or manually install each app:

   npm install
   cd shell && npm install
   cd ../todo-app && npm install
   cd ../wishlist-app && npm install

Running the Application

Start all three applications simultaneously:

npm run dev

Or start each app individually:

# Terminal 1 - Todo App (runs on port 5173)
cd todo-app && npm run dev

# Terminal 2 - Wishlist App (runs on port 5174)
cd wishlist-app && npm run dev

# Terminal 3 - Shell App (runs on port 5175)
cd shell && npm run dev

Then open your browser and navigate to:

• Shell App: http://localhost:5175

🏗️ Architecture Overview

Module Federation Setup

This project uses @originjs/vite-plugin-federation for module federation:

• Shell App: Host application that loads remote modules

  • Loads TodoApp from http://localhost:5173
  • Loads WishlistApp from http://localhost:5174
  • Provides shared dependencies (React, React-DOM)

• Todo App: Remote module that exposes ./App

  • Runs on port 5173
  • Fully functional todo list with add, delete, and toggle features

• Wishlist App: Remote module that exposes ./App

  • Runs on port 5174
  • Wishlist management with item prices and priorities

Key Features

Shell App

• Tab-based navigation between micro frontends
• Lazy loading of remote components
• Shared React and React-DOM dependencies
• Modern gradient header with navigation buttons

Todo App

• ✓ Add new todos
• ✓ Mark todos as complete/incomplete
• ✓ Delete todos
• ✓ Real-time statistics (total, completed, pending)
• ✓ Enter key support for quick entry

Wishlist App

• ⭐ Add wishlist items with prices
• ⭐ Set priority levels (High, Medium, Low)
• ⭐ Update priorities dynamically
• ⭐ Delete items
• ⭐ Real-time total price calculation
• ⭐ Color-coded priority indicators

📦 Building for Production

Build all applications:

npm run build:all

Or build individually:

npm run build:shell
npm run build:todo
npm run build:wishlist

Built files will be in dist/ directories of each app.

🔧 Configuration

Vite Config Details

Each app has a vite.config.js file configured with:

• Module Federation: Using @originjs/vite-plugin-federation
• React Plugin: For JSX support
• Shared Dependencies: React and React-DOM shared across all apps
• CORS: Enabled for cross-origin module loading

Port Configuration

• todo-app: Port 5173
• wishlist-app: Port 5174
• shell: Port 5175

You can modify these in respective vite.config.js files.

🎨 Styling

All apps use plain CSS with:

• Modern gradient designs
• Responsive layouts
• Smooth transitions and hover effects
• Color-coded indicators for priorities

🔄 How Micro Frontends Work Here

1. Shell App starts and initializes the application
2. User selects a tab (Todo or Wishlist)
3. Shell loads the corresponding micro frontend module dynamically
4. Lazy loading ensures only required code is loaded
5. Shared dependencies (React, React-DOM) are loaded once and shared
6. Each micro frontend maintains its own state and styling

💡 Development Tips

• Hot Module Replacement: Each app supports HMR for fast development
• Independent Development: Each app can be developed and tested independently
• Modular Testing: Test each micro frontend separately
• Easy Scaling: Add more micro frontends by following the same pattern

🐛 Troubleshooting

Remote modules not loading

• Ensure all three dev servers are running on their respective ports
• Check browser console for CORS errors
• Verify the remote URLs in shell/vite.config.js

Port conflicts

• Change port numbers in vite.config.js of each app
• Update corresponding remote URLs in shell's config

Dependency issues

• Delete node_modules and package-lock.json
• Run npm run install:all again

📚 Resources

• Vite Documentation
• Module Federation
• @originjs/vite-plugin-federation

📝 License

This project is open source and available for learning and development purposes.

---

Happy coding! 🎉