Microfrontends with React, Angular and Vue

Example project demonstrating a microfrontend architecture using Module Federation with applications built in different frameworks.

Structure

.
├── shell-react/       # Host application
├── remote-react/      # React remote
├── remote-angular/    # Angular remote
└── remote-vue/        # Vue remote

Stack

Application	Framework	Bundler	Module Federation
Host	React 19	Vite	@module-federation/vite
Remote	React 19	Vite	@module-federation/vite
Remote	Angular 20	Webpack	@angular-architects/module-federation
Remote	Vue 3	Vite	@module-federation/vite

Features

• React host application
• React remote
• Angular remote
• Vue remote
• Lazy loading of microfrontends
• Independent development and deployment
• Cross-framework integration
• Route-based loading

Getting Started

Install dependencies for each project.

cd shell-react
npm install

cd ../remote-react
npm install

cd ../remote-angular
npm install

cd ../remote-vue
npm install

Start each application in a separate terminal.

# React Host
cd shell-react
npm run dev

# React Remote
cd remote-react
npm run dev

# Angular Remote
cd remote-angular
npm start

# Vue Remote
cd remote-vue
npm run dev

Ports

Application	Port
React Host	5173
React Remote	5174
Vue Remote	5175
Angular Remote	4200

Notes

• React remotes are consumed directly using React.lazy().
• Angular and Vue remotes expose a mount() API for framework-agnostic integration.
• Each remote can run independently during development.