MFX Starter

Module Federation eXperience: a no-nonsense module federation starter project to unlock your microfrontends architecture journey

🚀 Demo

Live Demo

📋 Project Overview

MFX Starter is a comprehensive, production-ready microfrontends starter project built with Module Federation. It demonstrates how to build scalable, maintainable microfrontend architectures using multiple frameworks (React, Angular, Svelte) within a single cohesive application.

This project provides a solid foundation for teams looking to implement microfrontends with proper error handling, shared state management, authentication, internationalization, and divergent tooling and testing strategies.

✨ Key Features

🏗️ Architecture

Module Federation: Built with Rsbuild and Module Federation for seamless microfrontend orchestration
Multi-Framework Support: React (Host), Angular (Provider), Svelte (Provider)
Monorepo Structure: npm workspaces for efficient dependency management
TypeScript First: Full TypeScript support across all applications and packages

🔧 Developer Experience

Hot Module Replacement: Lightning-fast development with HMR across all MFEs
Shared Utilities: Common utilities and components shared across microfrontends
Consistent Tooling: Unified ESLint, Prettier, and TypeScript configurations
Testing Options: Jest, Karma/Jasmine, Vitest, and Cypress for full testing coverage

🛡️ Production Ready

Error Boundaries: Graceful degradation when remote modules fail
Authentication: JWT-based authentication with secure token management
Internationalization: i18next integration for multi-language support
State Management: Zustand for cross-MFE state sharing
Security: CSP-ready, secure token storage, and CORS considerations

🎨 Styling & UI

Tailwind CSS: Utility-first CSS framework for React and Svelte
SCSS: Modern CSS preprocessing for Angular
Responsive Design: Mobile-first approach with consistent breakpoints

🏁 Getting Started

Prerequisites

Node.js >= 24.0.0
npm >= 8.0.0

Installation

Clone the repository:

git clone https://github.com/Barnett-Studios/mfx-starter.git
cd mfx-starter

Install dependencies and build shared packages:

npm install

Set up environment variables:

# Copy environment template files
cp apps/mf_host/.env.example apps/mf_host/.env
cp apps/mf_provider_angular/.env.example apps/mf_provider_angular/.env
cp apps/mf_provider_svelte/.env.example apps/mf_provider_svelte/.env

Start all applications:

npm run start:all

Individual Application Commands

Host Application (React):

npm run dev -w mf_host

Angular Provider:

npm run dev -w mf_provider_angular

Svelte Provider:

npm run dev -w mf_provider_svelte

(Optional) Local Build+Preview Development with Custom Hostnames

When running individual applications or using the preview:host scripts, you might encounter URLs like host-react.mfx.com, provider-angular.mfx.com, and provider-svelte.mfx.com. To ensure your browser can resolve these custom hostnames to your local development server, you need to add entries to your system's hosts file.

Example hosts file entries:

127.0.0.1 host-react.mfx.com
127.0.0.1 provider-angular.mfx.com
127.0.0.1 provider-svelte.mfx.com

- **Linux/macOS:** `/etc/hosts`
- **Windows:** `C:\Windows\System32\drivers\etc\hosts`

Additionally, be aware that when microfrontends load resources from different origins (e.g., the host loading a provider), Cross-Origin Resource Sharing (CORS) policies apply. Ensure your Rsbuild configurations for development servers are set up to allow the necessary CORS headers to prevent resource loading issues. Therefore, the correct values for these hostnames must also be configured in the respective .env files for each project (e.g., apps/mf_host/.env), as commands like builduse cross-env env-cmd -f .env rsbuild build to inject these environment variables, which Rsbuild then uses for CORS configuration.

Building for Production

# Build all applications
npm run build:all

# Build individual applications
npm run build -w mf_host
npm run build -w mf_provider_angular
npm run build -w mf_provider_svelte

Deployment Considerations:

Unique URLs: Each microfrontend's build output (dist folder) should be deployed to a unique, publicly accessible URL or path (e.g., https://your-app.com/, https://your-app.com/angular-mfe/, https://your-app.com/svelte-mfe/).
Host remotes Configuration: The host application's Module Federation configuration (module-federation.config.ts) must specify the full URLs to the Module Federation manifest files of the provider microfrontends it consumes. The base URLs for the providers are configurable via .env files.
Shared Packages: Libraries like @mfx/shared-utils, react, i18next, and zustand are configured as shared singletons in Module Federation. This means the host application bundles and provides a single instance of these libraries, which is then consumed by the microfrontends. Changes to these shared packages typically require rebuilding and redeploying the host application.

Running Tests

# Run all tests
npm run test:all

# Run E2E tests
npm run e2e

# Open Cypress Test Runner
npm run cy:open

🏛️ Architecture

High-Level Overview

┌─────────────────────────────────────────────────────────────────┐
│                        MF Host (React)                          │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │   Navigation    │  │   Auth Module   │  │  Notifications  │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
│                                                                 │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │ Angular Widget  │  │ Svelte Widget   │  │   Shared UI     │  │
│  │   (Remote)      │  │   (Remote)      │  │  Components     │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                                 │
                                 │
              ┌─────────────────────────────────────┐
              │         Shared Packages             │
              │                                     │
              │  ┌─────────────┐ ┌─────────────┐    │
              │  │   Utils     │ │     UI      │    │
              │  │ (Zustand,   │ │ Components  │    │
              │  │  Axios,     │ │  (React)    │    │
              │  │  i18next)   │ │             │    │
              │  └─────────────┘ └─────────────┘    │
              └─────────────────────────────────────┘

Module Federation Configuration

Each microfrontend exposes specific modules that can be consumed by the host application:

Host (mf_host):

Consumes: AngularWidget, SvelteWidget, routing modules
Provides: Global navigation, authentication, notifications, and shared singleton instances of core libraries (react, i18next, zustand) and @mfx/shared-utils.

Angular Provider (mf_provider_angular):

Exposes: AngularWidget, AngularRoutes
Technology: Angular 20+ with SCSS
Consumes shared core libraries and @mfx/shared-utils from the host.

Svelte Provider (mf_provider_svelte):

Exposes: SvelteWidget, SvelteRoutes
Technology: Svelte 5+ with Tailwind CSS
Consumes shared core libraries and @mfx/shared-utils from the host.

Data Flow & Communication

Shared State: Zustand stores manage global state (authentication, user preferences) and are accessible as singletons across all microfrontends.
Event System: Custom event dispatcher for **decoupled, fire-and-forget cross-MFE communication.*- Microfrontends dispatch actions (e.g., item added, counter changed) which the host or other MFEs can listen to.
HTTP Client: Shared Axios instance with authentication and error handling
Internationalization: Centralized i18next configuration ensuring consistent language across the entire application.

Error Handling Strategy

Error Boundaries: React Error Boundaries wrap each remote module
Graceful Degradation: Fallback UI when remote modules fail to load
Global Error Handling: HTTP interceptors catch and handle API errors
User Feedback: Global notification system for error reporting (triggered by dispatchNotification from any MFE).

🛠️ Technologies Used

Core Technologies

Build Tool: Rsbuild with Module Federation plugin
Languages: TypeScript, JavaScript
Package Manager: npm with workspaces

Frameworks & Libraries

React: 19.1.0 (Host application)
Angular: 20.0.6 (Provider application)
Svelte: 5.35.4 (Provider application)
Zustand: 5.0.6 (State management)
Axios: 1.6.5 (HTTP client)
i18next: 23.8.2 (Internationalization)
react-i18next: 13.5.0 (React bindings for i18next)

Development Tools

Testing: Jest, Karma/Jasmine, Vitest, Cypress
Linting: ESLint with TypeScript support
Formatting: Prettier
Styling: Tailwind CSS, SCSS

DevOps & CI/CD

GitHub Actions: Automated testing and deployment

🤝 Contributing

Contributions from the community are warmly welcomed! Please read our Contributing Guidelines before submitting pull requests.

Development Workflow

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes and add tests
Run the test suite: npm run test:all
Run linting: npm run lint:all
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🗺️ Roadmap

Phase 1: Core Foundation ✅

Phase 2: Enhanced Features 🚧

Advanced routing with nested microfrontends
Performance monitoring and analytics
Advanced caching strategies
Micro-app deployment strategies
Integration with popular state management libraries

Phase 3: Enterprise Features 📋

Single Sign-On (SSO) integration
Advanced security features
Multi-tenant support
Advanced monitoring and logging
Performance optimization guides

Phase 4: Developer Tools 🔧

CLI tool for generating new microfrontends
Visual development tools
Advanced debugging utilities
Documentation generator

🆘 Support

If you encounter any issues or have questions, check the Issues page

About

Built and maintained by Barnett Studios — building products, teams, and systems that last. Part-time technical leadership for startups and scale-ups.

Name		Name	Last commit message	Last commit date
apps		apps
packages		packages
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierrc.cjs		.prettierrc.cjs
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

MFX Starter

🚀 Demo

📋 Project Overview

✨ Key Features

🏗️ Architecture

🔧 Developer Experience

🛡️ Production Ready

🎨 Styling & UI

🏁 Getting Started

Prerequisites

Installation

Individual Application Commands

(Optional) Local Build+Preview Development with Custom Hostnames

Building for Production

Deployment Considerations:

Running Tests

🏛️ Architecture

High-Level Overview

Module Federation Configuration

Data Flow & Communication

Error Handling Strategy

🛠️ Technologies Used

Core Technologies

Frameworks & Libraries

Development Tools

DevOps & CI/CD

🤝 Contributing

Development Workflow

📄 License

🗺️ Roadmap

Phase 1: Core Foundation ✅

Phase 2: Enhanced Features 🚧

Phase 3: Enterprise Features 📋

Phase 4: Developer Tools 🔧

🆘 Support

About

About

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages