Micro-Frontends in Practice: Module Federation, Shared Dependencies, and Governance

1. When Front-End Monoliths Break Down

In engineering organizations with dozens of feature squads, a monolithic front-end repository becomes a bottleneck: pull requests conflict in massive lockfiles, end-to-end CI build runs take 45 minutes, and a minor bug in the billing settings page can block an urgent deployment for the primary customer dashboard.

Micro-frontends decompose the presentation tier into autonomous, independently deployable web applications that are dynamically assembled in the browser into a coherent single-page application experience.

2. Runtime Orchestration via Module Federation

Unlike legacy iframe embeds (which suffer from accessibility nightmares and broken browser history) or build-time npm packages (which require re-releasing the entire host shell), Module Federation operates at runtime.

The host shell downloads a lightweight remoteEntry.js manifest from the remote child service on-demand. Child components are loaded over CDN, mounting transparently within host layout slots without requiring page reloads.

const { ModuleFederationPlugin } = require('@module-federation/enhanced');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_portal',
      remotes: {
        billingApp: 'billingApp@https://billing.khizex.com/remoteEntry.js',
        analyticsApp: 'analyticsApp@https://analytics.khizex.com/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^19.0.0', eager: false },
        'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
        '@khizex/design-system': { singleton: true }
      },
    }),
  ],
};

3. Managing Shared Singletons (React, Design Tokens)

The greatest hazard in micro-frontends is dependency duplication. If three remote applications load their own copies of React and utility libraries, client bundle payloads explode into multiple megabytes.

Module Federation provides shared configuration with singleton: true. The host runtime reconciles semantic version constraints, ensuring that exactly one copy of React and the shared design system is evaluated in the browser memory space.

4. Inter-App Communication & Routing Governance

Direct tight coupling—such as having one micro-frontend import internal state stores from another—reintroduces monolithic fragility. Communication between independent remotes must follow strict loose coupling.

Employ standard browser CustomEvents via a typed CustomEventBus or lightweight pub/sub channels. Routing should be coordinated by the host container, with child applications mounting relative sub-routes.

5. Zero-Blast-Radius Independent Deployments

Each squad maintains its own independent Git repository and CI/CD deployment pipeline. When the billing squad pushes an update, their pipeline compiles the micro-frontend and uploads the artifacts to cloud storage (S3/GCS) with a cache-busted manifest.

The host application picks up the new feature instantaneously on the very next browser refresh without needing any redeployment of the root host shell.

6. Frequently Asked Questions