micro-frontends

Setting up a monorepo for micro-frontend architecture involves structuring modular frontend components to enable independent team deployments. This Skill provides strategies for monorepo setup, managing shared dependencies, and configuring build tooling for scalable applications.

Managing shared dependencies across micro-frontends requires strategies for creating shared UI components, configuration, and TypeScript types. This approach ensures consistency across independently deployed applications while minimizing bundle duplication and version conflicts.

Configuring independent CI/CD deployments for micro-frontends requires per-app pipeline setup and contract testing. This Skill offers best practices for deploying individual modules independently, allowing teams to release updates without coordinating a full application build.

Cross-app communication in micro-frontends works by implementing an event bus for inter-app communication and strategies for shared auth state. It also guides cross-app navigation and routing to ensure seamless user transitions between independently deployed modules.

Module federation can be used to decompose an existing monolithic frontend into manageable modules. This Skill covers a wide range of scenarios, providing architectural patterns for both greenfield projects and breaking down large monolithic frontends.

You should not use micro-frontend architecture if your project lacks multiple teams or does not require independent scaling. It demands knowledge of modern JavaScript frameworks and build tools, introducing overhead that is unnecessary for smaller or single-team applications.