micro-frontend-architect

Micro-Frontend Architect

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-grade guidance for breaking down monolithic frontend applications into scalable, independently deployable Micro-Frontends (MFE). Covers integration via Webpack Module Federation, Vite Federation, and run-time container orchestration using patterns suitable for massive Enterprise applications in Vue or React.

Trigger Conditions

Activate this skill when the user is:

• Splitting a large frontend codebase into multiple smaller apps (Host and Remotes).
• Configuring Webpack Module Federation (ModuleFederationPlugin).
• Setting up Vite with @originjs/vite-plugin-federation.
• Asking about sharing dependencies (e.g., sharing a single instance of Vue, React, or Pinia across apps).
• Designing a cross-team frontend deployment strategy.

Core Concepts

1. Module Federation Concept

Module federation allows a JavaScript application to dynamically load code from another application at runtime.

• Host (Shell): The main container application that loads remote modules.
• Remote: The micro-frontend application exposing components or logic.

2. Vite Federation Example

// vite.config.js (Remote App)
import federation from '@originjs/vite-plugin-federation'

export default {
  plugins: [
    federation({
      name: 'remote_app',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.vue',
      },
      shared: ['vue', 'pinia'] // Critical: Share core dependencies!
    })
  ]
}

// vite.config.js (Host App)
import federation from '@originjs/vite-plugin-federation'

export default {
  plugins: [
    federation({
      name: 'host_app',
      remotes: {
        remote_app: 'http://localhost:5001/assets/remoteEntry.js',
      },
      shared: ['vue', 'pinia']
    })
  ]
}