Micro-Frontends with Vite Module Federation

Introduction: Scaling Large-Scale Frontend Projects

As frontend projects grow in size and complexity, maintaining a single, monolithic codebase becomes increasingly difficult. Teams face slow build times, deployment bottlenecks, and dependency conflicts when coordinating changes across distinct features, especially when managing monorepos without tools like Turborepo.

To scale development, enterprises deploy micro-frontend architectures. This pattern divides a monolithic application into smaller, independently deployable modules that are loaded and assembled at runtime.

Module Federation provides the core architecture for this runtime integration. Originally developed for Webpack (and now supported by modern alternatives like Rspack), it allows a host application to import modules from separate remote builds dynamically, sharing common dependencies to prevent double-loading.

How Module Federation Works in the Vite Ecosystem

Vite's Module Federation leverages native ES Modules (ESM) to load remote modules dynamically over HTTP, integrating seamlessly into the modern Vite ecosystem:

• Dynamic Remotes: The host application downloads a lightweight remoteEntry.js manifest at runtime, mapping module exports to dynamic URL locations.
• Dependency Sharing: Common dependencies (like React or Vue) are declared as shared. If the host already loaded React, the remote uses the host's instance instead of downloading its own copy.
• Version Coordination: The runtime checks shared dependency versions, fallback-loading a compatible version if a mismatch occurs.

By loading ES modules natively over the network, applications avoid complex runtime iframe layers and maintain a unified styling and state framework.

Configuring Host and Remote Builds

To implement Module Federation in Vite, we use the @originjs/vite-plugin-federation package. The host application declares the names of the remotes and the location of their entry manifests. The remote application declares the specific components or utilities it wishes to expose, along with the list of shared dependencies it supports.

Technical Implementation: Vite Federation Config

The configuration block below demonstrates how to configure a Vite application to act as both a host (importing remote modules) and a remote (exposing shared modules):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'host-app',
      remotes: {
        // Define remote entry points
        auth_remote: 'http://localhost:5001/assets/remoteEntry.js',
        dashboard_remote: 'http://localhost:5002/assets/remoteEntry.js',
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
  build: {
    target: 'esnext', // Required for ESM top-level await support
  },
});

Orchestrating Micro-Frontends at the Edge with Bramsley