# Micro-Frontends

> Implementing Module Federation for scaling frontend teams.

- Skill: `j4flmao/micro-frontends` (Agent Skill)
- Install (CLI): `npx skillmds@latest add j4flmao/micro-frontends`
- Raw SKILL.md: https://api.skillmd.com/api/skills/j4flmao/micro-frontends/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: j4flmao (https://skillmd.com/u/j4flmao)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/j4flmao/micro-frontends

---


# Micro-Frontends

## Core Concepts
- **Module Federation:** Dynamically load code from another Webpack/Vite build at runtime.
- **Host App (Shell):** The main container application.
- **Remote App:** Independently deployed feature modules.

## Mermaid Diagram
```mermaid
%%{init: {"theme": "default", "flowchart": {"useMaxWidth": true}}}%%
graph TD
    A[Host App Shell] --> B[Remote App 1: Auth]
    A --> C[Remote App 2: Dashboard]
    A --> D[Remote App 3: Checkout]
    B -.-> E[Shared Libs e.g. React]
    C -.-> E
    D -.-> E
```

## Best Practices & Code Snippets

### 1. Webpack Module Federation Config (Host)
```javascript
// webpack.config.js (Host)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};
```

### 2. Consuming Remote Components
```tsx
import React, { Suspense } from 'react';

// Dynamically import the remote component
const RemoteButton = React.lazy(() => import('app1/Button'));

export default function App() {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Remote Button...</div>}>
        <RemoteButton />
      </Suspense>
    </div>
  );
}
```