Micro Frontends Demo
An innovative microfrontend project fusing React, Vue, Angular, and Svelte into a unified application. This showcases a multi-framework architecture enabling different UI/UX experiences to coexist within a single harmonious app.
Micro-Frontends Demo
Tech/Tool Stack
- Single-SPA 6.x: A framework for building microfrontends.
- pnpm Workspace: A fast, disk space-efficient package manager that supports monorepos.
- Webpack/Rollup: Bundlers for efficiently building JavaScript applications.
Microfrontend Applications
- Header: Built with React 18.
- Navigation (Sidebar): Built with Vue 3.
- Main Content: Built with Angular 18.
- Footer: Built with Svelte 4.
Prerequisites
- Node.js >= 20.16.0: Ensure you have the required Node.js version installed. You can download it here.
- Git: Make sure Git is installed. Download it here.
- pnpm: Follow the instructions to install pnpm here.
Basic Usage
1. Clone this Repository
# Clone via SSH
git clone [email protected]:physicsSorcererKing/micro-frontends-demo.git
# Or clone via HTTPS
git clone https://github.com/physicsSorcererKing/micro-frontends-demo.git
2. Install Dependencies
Navigate to the cloned directory and install all package dependencies using pnpm:
cd micro-frontends-demo
pnpm install
3. Serve All Packages in Development Mode
Microfrontend apps will be served in standalone mode:
pnpm dev:all
Then open your browser and go to: http://localhost:9000/
Production
1. Build All Packages
Microfrontend apps will be built in standalone mode:
pnpm build:all
2. Preview All Applications
pnpm serve:all
Then open your browser and go to: http://localhost:9000/
