mfe-boundary-toolchain

MFE boundary rules — toolchain patterns

Version: 1.3 | Skill: reviewing-mfe-boundaries | Source: Building Micro-Frontends (O'Reilly)

Toolchain-specific code patterns for each boundary rule. Load this file when the user is working with a specific framework or when a rule violation needs framework-specific guidance. For principle definitions and violation signals, see rules-core.md.

URL routing — shell first segment, MFE below (Rule 7)

Principle: shell loads first segment from a dynamic manifest; MFE hardcodes deeper paths. Navigation API is flexible. Shell handles shell:* platform events only. See routing-ownership.md.

// React Router — shell
<Route path="/catalog/*" element={<RemoteMount scope="catalog_mfe" />} />

// React Router — catalog remote (basename matches shell prefix)
<BrowserRouter basename="/catalog">
  <Routes>
    <Route path="/" element={<ProductList />} />
    <Route path="/product/:productId" element={<ProductDetail />} />
  </Routes>
</BrowserRouter>

// Angular — shell first segment
{ path: 'catalog', loadChildren: () => loadRemoteModule('catalog', './routes') }
// catalog/routes.ts (catalog team): { path: 'product/:id', component: ProductDetailComponent }

// Single SPA — shell first segment via activeWhen prefix
registerApplication({
  name: 'catalog',
  app: () => import('catalog/main'),
  activeWhen: (location) => location.pathname.startsWith('/catalog'),
})
// catalog/main mounts its own router for /catalog/product/:id

---

Rule 2 — Exposes a minimal API surface to its container

Toolchain patterns — same rule, different surfaces:

// Native Federation (Angular) — shell passes props via loadRemoteModule input binding
// ✓ Minimal context — route param only; remote fetches its own data
// app.routes.ts (shell)
{
  path: 'checkout/:cartId',
  loadComponent: () =>
    loadRemoteModule('checkout', './CheckoutComponent')
      .then(m => m.CheckoutComponent)
  // cartId passed via route param — remote reads ActivatedRoute itself
}

// ✗ Shell resolving full domain objects before loading the remote
{
  path: 'checkout',
  resolve: { cart: CartResolver, user: UserResolver, shipping: ShippingResolver },
  loadComponent: () =>
    loadRemoteModule('checkout', './CheckoutComponent')
      .then(m => m.CheckoutComponent)
  // resolved data injected via route — container now owns context
}