Getting Started with MFE Forge

This guide will walk you through creating a complete Micro Frontend architecture from scratch.

Prerequisites

• Node.js >= 20.0.0 (or Bun >= 1.1.0)
• Package manager: npm, pnpm, or Bun
• Git

Step 1: Initialize Your Project

npx mfe-forge init appname-platform

This creates:

• Workspace configuration
• Base TypeScript config
• mfeforge.config.ts with your preferences
• Directory structure (apps/, packages/)

Step 2: Create Your First Scope

Scopes organize MFEs by team or product. Let's create a appname scope:

cd appname-platform
npx mfe-forge generate host appname/host

This scaffolds a host application at apps/appname/host on port 3000.

Step 3: Add Micro Frontends

npx mfe-forge generate app appname/auth
npx mfe-forge generate app appname/dashboard
npx mfe-forge generate app appname/inventory

Each app:

• Gets an auto-detected port
• Is registered in the host's vite.config.ts
• Gets a dev script in root package.json

Step 4: Add Shared Packages

npx mfe-forge generate package ui
npx mfe-forge generate package utils

Step 5: Install Dependencies

bun install
# or
pnpm install
# or
npm install

Step 6: Start Developing

# Run everything
bun dev

# Or run specific scope
bun mfe-forge dev --scope appname

# Or run single app
bun mfe-forge dev --app appname/auth

Step 7: Configure Routes in Host

Open apps/appname/host/src/App.tsx and add routes:

import React, { Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'

const AuthApp = React.lazy(() => import('authApp/App'))
const DashboardApp = React.lazy(() => import('dashboardApp/App'))

export default function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/auth/*" element={<AuthApp />} />
        <Route path="/dashboard/*" element={<DashboardApp />} />
      </Routes>
    </Suspense>
  )
}

Step 8: Cross-MFE Communication

Use the event bus for communication:

import { globalEventBus } from '@mfe-forge/core'

// In auth app
function login() {
  globalEventBus.emit('auth:login', { user: { id: '1', name: 'John' } })
}

// In dashboard app
useEffect(() => {
  return globalEventBus.on('auth:login', ({ user }) => {
    console.log('User logged in:', user)
  })
}, [])

Step 9: Sync Everything

After adding or removing apps, sync configurations:

npx mfe-forge sync

This updates:

• Host vite.config.ts remotes
• TypeScript declarations
• Route registrations

Next Steps

• Learn how to Publish
• Set up testing
• Learn about design systems