yugasun / micro-frontend-starter

Micro frontend template for starter using qiankun + Vite + TypeScript + Vue3 + React.js + Svelte 🚀

Micro Frontend Starter

Feature

• Micro Framework using qiankun 🔥
• Monorepo using pnpm 🔥
• Develop & build using vite 🔥
• Support Vue.js, React.js, Svelte.js frameworks
• Auto develop and build commands.
• Support docker deployment.

Architecture

Application list:

• packages/plugin: Plugin for vite to use qiankun
• packages/main: The main application using Vue.js
• packages/subapp1: The child application using Vue.js
• packages/subapp1_1: The child application using Vue.js
• packages/subapp2: The child application using React.js
• packages/subapp3: The child application using Svelte.js

Usage

1. Clone project:

git clone https://github.com/yugasun/micro-frontend-starter.git

2. Install dependencies:

pnpm i

3. Start develop:

pnpm run dev

Now you can access by http://localhost:8000.

Develop for single application:

pnpm run dev --app main

1. Build:

pnpm run build

# or build for single application
pnpm run build --app main

5. Start by docker:

# start
pnpm run docker:up

License

MIT License

Copyright (c) 2022 Yuga Sun

micro-frontend-starter's Issues

can not run properly after build

apps run very well on dev mode, but can not serve as production

cause me 404 error on http://localhost:3000/subapp1/ which port 3000 is my main app

这个代码build之后不能成功运行，会有404错误。如果你那边可以运行，麻烦在package.json中添加script脚本防止其他人运行错误

路由跳转问题

左侧菜单点击subapp1->跳转到subapp1; 再subapp1中点击 about, 跳转到 subapp1/about；这个时候点击任何左侧菜单栏；再点击subapp1，路由保留的是 subapp1/about; 为什么不是 subapp1呢？

这个需要怎么处理呢？

Error: Cannot find module 'packages/subapp3/node_modules/@micro-fe/vite-plugin/dist/index.js'.

failed to load config from packages/subapp3/vite.config.ts
error when starting dev server:
Error: Cannot find module 'packages/subapp3/node_modules/@micro-fe/vite-plugin/dist/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (node:internal/modules/cjs/loader:400:19)
    at Module._findPath (node:internal/modules/cjs/loader:613:18)
    at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (packages/subapp3/vite.config.ts:34:34)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at _require.extensions.<computed> [as .js] (file:///node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:62907:24)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
 ELIFECYCLE  Command failed with exit code 1.

vite.config.ts中bas的路径在部署时候只能写死？

https://github.com/yugasun/micro-frontend-starter/blob/main/packages/subapp1/vite.config.ts
中的代码

// TODO: change to real deploy domain
const DEPLOY_URL = 'http://localhost:8001';

在部署到不同服务器时候，只能写死？

Do you considered support for concurrent rendering of multiple micro apps on the same page?

Hi, do y're setup support concurrent rendering? I have a use case where i need to render multiple times same micro-front end on the same page. So i ran in a issue where only one time it renders it looks like micro app overrides itself because it has same name