Micro-Frontends with Module Federation and Zustand

This project demonstrates a micro-frontend architecture using Module Federation with Vite and shared state management using Zustand. It showcases how to load remote applications inside a host application while maintaining a shared state across all micro-frontends.

Features

• 🚀 Module Federation - Load remote applications at runtime
• 🔄 Shared State - Zustand for cross-application state management
• ⚡ Vite - Fast development experience with Vite
• 🏗️ Micro-Frontend Architecture - Independent deployment of applications
• 🔌 Pluggable - Easy to add or remove micro-frontends

Project Structure

micro-frontends/
├── host/                 # Host application
│   ├── src/
│   │   ├── App.jsx       # Main application component
│   │   └── main.jsx      # Application entry point
│   └── vite.config.js    # Vite configuration with Module Federation
│
└── remote-app/          # Remote application (example)
    ├── src/
    │   └── Button.jsx  # Example remote component
    └── vite.config.js   # Remote app configuration

Getting Started

Prerequisites

• Node.js 16+ and npm/yarn
• Basic understanding of React and Vite

Installation

1. Clone the repository

   git clone <repository-url>
   cd micro-frontends

2. Install dependencies

   # Install host dependencies
   cd host
   npm install
   
   # Install remote app dependencies
   cd ../remote-app
   npm install

3. Start the applications

   In separate terminal windows:

   # Terminal 1 - Start the host application
   cd host
   npm run dev
   
   # Terminal 2 - Start the remote application
   cd remote-app
   npm run dev

4. Access the applications

   • Host application: http://localhost:5173
   • Remote application: http://localhost:5001

Shared State with Zustand

This project demonstrates shared state management using Zustand. The state is defined in the host application and can be accessed by all micro-frontends.

Example Usage

// In any component
import { useCountStore } from 'remoteApp/store';

function Counter() {
  const { count, increment } = useCountStore();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Module Federation Configuration

The Module Federation setup allows loading remote applications at runtime. Here's a basic configuration:

// vite.config.js (Host)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "host-app",
      filename: "remoteEntry.js",
      remotes: {
        remoteApp: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  // ... other config
});

Deployment

Each micro-frontend can be built and deployed independently:

# Build the host application
cd host
npm run build

# Build the remote application
cd ../remote-app
npm run build

Best Practices

1. Versioning - Keep track of shared dependency versions
2. Error Boundaries - Implement error boundaries around remote components
3. Loading States - Show loading states while remote applications are being fetched
4. Type Safety - Consider using TypeScript for better type safety
5. Testing - Test each micro-frontend independently and in integration

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.