Micro-Frontend Config Generator

Build robust micro-frontend architectures with our configuration generator. This tool helps you create Module Federation configurations for Webpack 5, SystemJS import maps, single-spa routing configs, and deployment manifests. Perfect for teams building scalable, independently deployable frontend applications with React, Vue, Angular, or any modern framework.

Module Federation Import Maps Single-spa Routing Deployment Manifests

Quick Examples

WEBPACK: Module Federation config
SYSTEMJS: Import map generation
ROUTING: Single-spa routes

Configuration Type

Orchestrator Framework

Project Name

Package Manager

Micro-Frontend Applications

Shared Dependencies

react ^18.0.0

react-dom ^18.0.0

Advanced Settings

TypeScript Support

Hot Module Replacement

Automatic Versioning

Generated Configuration

// Configuration will appear here

// Remote configurations will appear here

// Package.json will appear here

// Deployment configuration will appear here

Architecture Overview

Add applications to see the architecture diagram

Export Options

Exposed Modules

One module per line, format: ./ModuleName: ./path/to/module

Route Path (optional)

Help & Related Tools

Everything you need to know

FAQ Frequently Asked Questions

What configuration formats does this tool support?

The generator supports Module Federation (Webpack 5), SystemJS import maps, single-spa configuration, Qiankun framework setup, and native ES modules. It can also generate deployment manifests, environment configs, and shared dependency configurations for optimal bundle optimization.

How do I create a micro-frontend configuration?

Start by adding your applications using the "Add Application" button. Define each app's name, port, exposed modules, and dependencies. Configure shared libraries to avoid duplication. The tool automatically generates the appropriate configuration files based on your selected orchestrator.

Which frameworks and build tools are supported?

This tool works with all major frameworks including React, Vue, Angular, Svelte, and vanilla JavaScript. It generates configs compatible with Webpack 5, Vite, Rollup, and other modern bundlers. The generated configurations work in all modern browsers supporting ES modules.

What are the best practices for shared dependencies?

The tool automatically suggests optimal sharing strategies for common libraries like React, Vue, or Angular. It uses semantic versioning ranges to ensure compatibility while maximizing code reuse. For production, it recommends using exact versions for critical shared dependencies.

Can I migrate an existing monolithic application?

Yes! Use the migration assistant mode to analyze your existing application structure. The tool helps identify logical boundaries for splitting into micro-frontends and generates incremental migration configs. It also provides a dependency analysis to optimize shared modules.