Skip to main content

Divyani Pant

← back_to_projects

Module Federation

Project Overview

A demonstration of Module Federation in React applications, showcasing how to share components between different applications at runtime.

Key Features

  • Independent deployment of micro-frontends
  • Shared component architecture
  • Runtime integration of remote components
  • Optimized bundle size and loading

Tech Stack

Project Architecture

module-federation/
    ├── host-app/           # Main container application
    │   ├── src/
    │   │   ├── components/
    │   │   │   └── TicTacToe/    # Tic Tac Toe game component
    │   │   │       ├── Board.tsx
    │   │   │       ├── Square.tsx
    │   │   │       └── Game.tsx
    │   │   ├── App.tsx
    │   │   └── index.tsx
    │   └── webpack.config.js
    │
    └── remote-app/         # Module provider application
        ├── src/
        │   ├── components/
        │   │   └── Comment/      # Comment section component
        │   │       ├── CommentList.tsx
        │   │       ├── CommentForm.tsx
        │   │       └── CommentItem.tsx
        │   ├── App.tsx
        │   └── index.tsx
        └── webpack.config.js

Setup Configuration

Host Application Configuration


new ModuleFederationPlugin({
name: "host_app",
remotes: {
  remote_app: "remote_app@http://localhost:3003/remoteEntry.js",
},
shared: {
  react: { 
    singleton: true,
    requiredVersion: false,
    eager: true
  },
  "react-dom": { 
    singleton: true,
    requiredVersion: false,
    eager: true
  }
},
})

Remote Application Configuration

new ModuleFederationPlugin({
  name: 'remote_app',
  filename: 'remoteEntry.js',
  exposes: {
    './Comment': './src/components/Comment/CommentList',
    './CommentForm': './src/components/Comment/CommentForm'
  },
  shared: {
    react: { 
      singleton: true,
      requiredVersion: false,
      eager: true
    },
    "react-dom": { 
      singleton: true,
      requiredVersion: false,
      eager: true
    }
  },
})

Best Practices

  • Make remote components self-contained
  • Define clear props interfaces
  • Handle state management internally
  • Include TypeScript types
  • Implement error boundaries
  • Handle loading states gracefully
  • Minimize shared dependencies