Module Federation Setup Skill

Use this skill when creating or configuring Module Federation for a new or existing React microfrontend in the StyleMate platform.

When to Use

• •Setting up a new microfrontend project
• •Configuring federation.config.ts
• •Debugging module federation loading issues
• •Adding shared dependencies
• •Exposing routes to the shell application

What This Skill Does

1. Federation Config Creation

Creates proper federation.config.ts with:

• •Unique module name based on context
• •Route exposure configuration
• •Shared dependencies (React, MUI, Router, etc.)
• •Proper singleton settings
• •Remote entry configuration

2. Vite Config Integration

Ensures vite.config.ts includes:

• •Module Federation plugin
• •Proxy configuration for API calls
• •Build optimizations
• •Development server settings

3. Route Export Setup

Configures src/app/routes.tsx to:

• •Export routes with proper metadata
• •Include authorization requirements
• •Define route guards
• •Set up lazy loading

4. Shell Integration

Provides instructions for:

• •Adding remote to shell's vite.config.ts
• •Importing routes in shell router
• •Configuring navigation menu items

Expected Inputs

• •Context name (e.g., "staff", "appointments", "payments")
• •Port number for development server
• •Required shared dependencies
• •Routes to expose

Deliverables

• •Complete federation.config.ts file
• •Updated vite.config.ts with proxy settings
• •Route export configuration
• •Shell integration instructions

Example Usage

Please set up Module Federation for the staff microfront. It will run on port 3003
and needs to expose routes for employee management, scheduling, and timesheets.

Technical Details

Shared Dependencies Configuration

shared: {
  'react': { singleton: true, requiredVersion: '^19.0.0' },
  'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
  'react-router-dom': { singleton: true },
  '@mui/material': { singleton: true },
  '@emotion/react': { singleton: true },
  '@emotion/styled': { singleton: true },
  'axios': { singleton: true }
}

Route Metadata Requirements

interface RouteMetadata {
  label: string;
  allowedRoles: string[];
  requireEmailConfirmed: boolean;
  requireBusiness: boolean;
  requireTwoFactor?: boolean;
}

Validation Steps

1. •Build the microfrontend: npm run build
2. •Check remoteEntry.js is generated
3. •Test route exposure in development mode
4. •Verify shared dependencies are deduplicated
5. •Test loading in shell application