Microfrontends single-spa Starter

This Vercel example starter demonstrates how to build a microfrontend architecture using single-spa and Module Federation, with two React applications that deploy independently to Vercel. The monorepo includes a root shell application, a content application, and shared TypeScript/ESLint configuration packages, all running on Vite with the @module-federation/vite plugin and the @vercel/microfrontends/experimental/vite plugin.

What is the Microfrontends single-spa Starter?

The Microfrontends single-spa Starter is a working reference implementation from Vercel's examples repository. It takes a monorepo setup as its input — two Vite-powered React apps plus shared packages — and produces a single page where the root app orchestrates the header, footer, and a content landing component from separate applications. The content app exposes a ./landing module through Module Federation, and the root app imports it at runtime as the remote content, using single-spa to manage the application lifecycle with bootstrap, mount, and unmount functions.

Key Features

• Independent deployments — The root and content applications have separate Vercel Deploy buttons and can be deployed to Vercel independently, while microfrontends.json groups them together.
• single-spa orchestration — The root app registers three single-spa applications (header, footer, content) via registerApplication, and each loading function uses dynamic ES module imports.
• Module Federation — The content app uses the federation plugin with name: 'content', manifest: true, and filename: 'remoteEntry.js', exposing the ./landing component.
• Remote consumption — The root app's Vite config lists content as a remote with entry /_content/remoteEntry.js, sharing React and React DOM as singletons.
• Microfrontends configuration — A microfrontends.json file defines the applications, routing paths, and a development fallback URL; the local proxy listens on port 3024 by default.
• Tailwind CSS styling — Both applications include @tailwindcss/vite and share a global CSS file for utility-first styling.
• Vercel Toolbar integration — The root app adds the vercelToolbar() Vite plugin and calls mountVercelToolbar() in its startup code.
• Shared configuration packages — The packages/ directory holds common TypeScript configurations, ESLint rules, and formatting standards used across the microfrontends.

Who is it for?

• Frontend architects — Evaluate a proven pattern for splitting a React application into independently deployable microfrontends, combining single-spa lifecycle management with Module Federation module sharing.
• Platform engineers — Set up a monorepo with shared TypeScript and ESLint configuration, plus per-app Vite builds that target Chrome 89 for top-level await support.
• Vercel users — Use the Microfrontends feature to route requests to specific apps: the root app is the default, and the content app handles paths starting with /_content/.

What can you do with it?

• Compose independent applications — The root app's index.html has dedicated mount points for header, content, and footer, while the TypeScript entry registers each one as a single-spa application active on every route.
• Run local development with a proxy — With pnpm installed, clone the repository, run pnpm install, then pnpm dev to start all applications and the Microfrontends proxy; open http://localhost:3024 to see the federated page.
• Deploy to Vercel — Each application has a one-click Deploy button, and the README shows the exact microfrontends.json configuration that maps the content app to /_content/:path* routes.

How does it work?

The starter uses two Vite configurations. The content app exposes the landing component through the @module-federation/vite plugin, and the root app declares that remote in its own config. At runtime, single-spa calls the registered loading functions, which dynamically import the remote entry and mount the React component using single-spa-react. The microfrontends.json file controls both the development proxy and production routing on Vercel.

FAQ

What tools does this starter use?

It uses Vite as the build tool, React and TypeScript for the applications, Tailwind CSS for styling, single-spa for lifecycle orchestration, and the @module-federation/vite and @vercel/microfrontends/experimental/vite plugins. Package management is handled with pnpm.

What port does the local development server use?

The Microfrontends proxy defaults to port 3024, and the root application is available at http://localhost:3024. To change this, set localProxyPort in the microfrontends.json file.

Why is the build target set to Chrome 89?

The configuration sets build.target: 'chrome89' because the example needs top-level await support, which is available in Chrome 89 and later browsers. This is required for the microfrontend runtime to load remote modules asynchronously.

Can the root and content apps be deployed separately?

Yes. The example includes separate Vercel Deploy buttons for each application. The root app acts as the default entry point, while the content app is routed to paths starting with /_content/ according to the microfrontends.json configuration.