https://github.com/zhanghongen/micro-spa-lite

Ultra‑lightweight micro‑frontend boilerplate (~50 LOC) with single‑spa, Module Federation & Chrome extension support
https://github.com/zhanghongen/micro-spa-lite

boilerplate chrome-extension micro-frontend micro-spa module-federation single-spa

Last synced: about 1 year ago
JSON representation

Ultra‑lightweight micro‑frontend boilerplate (~50 LOC) with single‑spa, Module Federation & Chrome extension support

• Host: GitHub
• URL: https://github.com/zhanghongen/micro-spa-lite
• Owner: zhangHongEn
• Created: 2025-06-18T11:49:20.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-19T08:53:22.000Z (about 1 year ago)
• Last Synced: 2025-06-26T18:07:04.345Z (about 1 year ago)
• Topics: boilerplate, chrome-extension, micro-frontend, micro-spa, module-federation, single-spa
• Language: JavaScript
• Homepage: https://zhanghongen.github.io/micro-spa-lite/vite-vue-app/home/
• Size: 1.3 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Micro‑SPA‑Lite 🚀

Ultra‑lightweight micro‑frontend boilerplate (~50 LOC) with single‑spa, Module Federation & Chrome extension support

Start building blazing‑fast micro‑frontends in minutes – no boilerplate bloat, full performance toolkit.

---

## 🌐 Online Demo Experience

🔗 **Host Demo**: Click here to see the live demo -> [Live Demo](https://zhanghongen.github.io/micro-spa-lite/vite-vue-app/home/) 

![](./docs/img/performance.png)

![](./docs/img/develop.gif)

## 🚀 Features

-	**Minimal Design**: Core logic written in fewer than 50 lines of JavaScript, enabling micro-frontend app loading, mounting, and unmounting ([mfe-main](https://github.com/zhangHongEn/micro-spa-lite/tree/main/mfe-main/src/preloadPlugin.js))

-	**Lightweight Dependencies**: No additional runtime frameworks; relies only on single-spa and Module Federation

-	**High-Performance Loading**: Uses manifest + runtimePlugins to enable parallel loading of main and sub-apps on first screen, eliminating waterfall loading

-	**Flexible Development Mode**: Supports local development of any sub-app via Chrome extension proxy without modifying the main app

---

## 🧩 Single Module Development Guide

If you only want to start a single sub-module for development and debugging, you can follow these steps:

1. git clone https://github.com/zhangHongEn/micro-spa-lite.git

2. `pnpm install && pnpm run dev`

3. open chrome plugin `module-federation`

4. vite-vue-app proxy to `http://localhost:5001/mf-manifest.json`

5. rspack-react-app proxy to `http://localhost:5002/mf-manifest.json`

---

## Add a New Application

mfe.json

```json

{

  "apps": [

    {

      "appCode": "vite-vue-app",

      "routes": ["/micro-spa-lite/new-app"],

      "entry": "entry": "http://localhost:5003/mf-manifest.json"

    }

  ]

}