What is Single-SPA and how does it differ from Module Federation?

Single-SPA is a JavaScript framework that acts as a top-level router for microfrontends. It manages application lifecycle hooks (bootstrap, mount, unmount) and decides which MFE is active based on the URL.

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@org/checkout',
  app: () => import('@org/checkout'),
  activeWhen: ['/checkout'],
});

start();

Module Federation (Webpack 5) is a module loading mechanism — it lets one app dynamically import code from another at runtime, sharing dependencies efficiently.

Key differences:

They are often used together: Single-SPA orchestrates routing, Module Federation handles runtime code sharing.