A production-ready proof-of-concept demonstrating 15 micro-frontend child apps built with different frameworks, all orchestrated by a single Qiankun host application. The monorepo uses pnpm workspaces for dependency management and AWS CDK for cloud deployment.
┌──────────────────────────────────┐
│ host-qiankun (3000) │
│ React 18 + Vite 6 + Qiankun 2 │
│ TailAdmin-style Tailwind CSS UI │
└──────────┬───────────────────────┘
│ registerMicroApps()
┌───────────┬───────────┼───────────┬───────────┐
▼ ▼ ▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ Webpack │ │ Vite │ │ Angular │ │ Ember │ │ 11 more │
│ React │ │ React │ │ 18 │ │ 5 │ │ apps │
└─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘
Each child app runs independently on its own dev server and is loaded into the host shell at runtime via Qiankun's micro-frontend protocol.
| App | Framework | Bundler | Port | Entry Mode |
|---|---|---|---|---|
app-webpack-js |
React 18 (JS) | Webpack 5 | 3001 | HTML |
app-webpack-ts |
React 18 (TS) | Webpack 5 | 3002 | HTML |
app-craco-js |
React 18 (JS) | CRA + CRACO | 3004 | HTML |
app-vite-js |
React 18 (JS) | Vite 6 | 3005 | HTML |
app-angular |
Angular 18 | Webpack (custom) | 3008 | Config |
app-vuejs |
Vue 3 | Vite 6 | 3009 | HTML |
app-solidjs |
SolidJS | Vite 6 | 3010 | HTML |
app-svelte |
Svelte 4 | Vite 6 | 3011 | HTML |
app-preact |
Preact 10 | Vite 6 | 3012 | HTML |
app-litjs |
Lit 3 | Vite 6 | 3013 | HTML |
app-mithril |
Mithril 2 | Vite 6 | 3014 | HTML |
app-alpine |
Alpine.js 3 | Vite 6 | 3015 | HTML |
app-riotjs |
Riot.js 9 | Vite 6 | 3016 | HTML |
app-ember |
Ember 5 | Ember CLI | 3017 | Config |
app-astro |
Astro 4 | Astro (Vite) | 3018 | HTML |
HTML entry = Qiankun fetches the app's index.html and extracts scripts/styles automatically.
Config entry = host explicitly lists the script and style URLs to load.
- Node.js >= 18
- pnpm >= 8 (
npm install -g pnpm) - AWS CLI + configured credentials (for deployment only)
# 1. Install all dependencies
pnpm install
# 2. Start a few apps + host (webpack-js, vite-js, host)
pnpm start:basic
# 3. Open the host
# http://localhost:3000
# Login: admin@demo.com / demo123# Start everything (14 child apps + host)
pnpm start:all
# Start individual apps
pnpm dev:host # Host on :3000
pnpm dev:webpack-js # Webpack React JS on :3001
pnpm dev:angular # Angular on :3008
pnpm dev:ember # Ember on :3017
pnpm dev:astro # Astro on :3018
# Start newer-framework apps + host
pnpm start:new # Vue, Solid, Svelte, Preact, Lit, Mithril, Alpine, Riot + hostqiankun-workspace/
├── host-qiankun/ # Host shell (React + Vite + Qiankun)
│ ├── src/
│ │ ├── main.jsx # Qiankun registration + start
│ │ ├── App.jsx # TailAdmin layout (sidebar, routes)
│ │ ├── apps/ # Per-app config (entry URLs, env)
│ │ │ ├── env.js # Shared origin helper (local vs CDN)
│ │ │ ├── index.js # App registry
│ │ │ └── app-*.js # Individual app configs
│ │ ├── auth/ # Mock auth (AuthContext, Login)
│ │ └── components/ # Home, layout components
│ └── vite.config.js
├── app-vite-js/ # Example Vite child app
├── app-webpack-js/ # Example Webpack child app
├── app-angular/ # Angular child app
├── app-ember/ # Ember child app
├── app-astro/ # Astro child app
├── ... # 10 more child apps
├── infra/ # AWS CDK stack (S3 + CloudFront)
│ ├── lib/qiankun-stack.ts
│ └── bin/infra.ts
├── scripts/
│ └── deploy.ps1 # Automated deployment script
├── package.json # Workspace root scripts
└── pnpm-workspace.yaml # Workspace packages
All apps produce static assets and are deployed to a single S3 bucket behind CloudFront, managed by AWS CDK.
# Install CDK dependencies
cd infra && npm install && cd ..
# Bootstrap CDK in your AWS account (one-time)
cd infra && npx cdk bootstrap && cd ..# Deploy everything (infra + all apps) to dev
pnpm deploy
# Deploy to production
pnpm deploy:prod
# Skip infra provisioning (when only app code changed)
.\scripts\deploy.ps1 -SkipInfra -Environment prod
# Use a specific AWS profile
.\scripts\deploy.ps1 -AwsProfile my-profile- CDK deploy -- provisions S3 bucket, CloudFront distribution (with OAC), CloudFront Function for SPA routing
- Build each child app -- sets
DEPLOY_BASE=/<app-id>/so asset paths resolve correctly under the CDN - Upload children to S3 --
aws s3 synceach app to its/<app-id>/prefix - Build the host -- sets
VITE_CDN_DOMAINso entry URLs point to CloudFront instead of localhost - Upload host to S3 -- syncs to the bucket root
- Invalidate CloudFront -- clears the CDN cache
pnpm infra:synth # Preview CloudFormation template
pnpm infra:deploy # Deploy infrastructure only
pnpm infra:destroy # Tear down all AWS resources| Variable | Where | Purpose |
|---|---|---|
VITE_APP_ENV |
host-qiankun/.env |
Environment selector: local, dev, test, prod |
VITE_CDN_DOMAIN |
Set by deploy script | CloudFront domain (e.g. https://d1234.cloudfront.net) |
DEPLOY_BASE |
Set by deploy script per app | Asset base path (e.g. /app-vite-js/) |
HTML entry (13 apps): Qiankun fetches the child's index.html from the entry URL, parses out <script> and <link> tags, and injects them into the host. The child app exports bootstrap, mount, and unmount lifecycle hooks.
Config entry (Angular, Ember): the host config explicitly lists script and style URLs. Qiankun loads them directly without fetching HTML first. Useful when the child's dev server doesn't produce a clean parseable index.html.
| Command | Description |
|---|---|
pnpm install |
Install all workspace dependencies |
pnpm start:all |
Start all 14 child apps + host |
pnpm start:basic |
Start webpack-js + vite-js + host |
pnpm start:new |
Start newer framework apps + host |
pnpm build |
Build all packages |
pnpm build:apps |
Build only child apps |
pnpm build:host |
Build only the host |
pnpm deploy |
Full deployment to AWS (dev) |
pnpm deploy:prod |
Full deployment to AWS (prod) |
pnpm clean |
Remove all node_modules, dist, build |
See host-qiankun/TROUBLESHOOTING.md for common issues and fixes.
MIT