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

Micro frontend template for starter using qiankun + Vite + TypeScript + Vue3 + React.js + Svelte 🚀
https://github.com/yugasun/micro-frontend-starter

micro-frontend micro-frontends qiankun qiankun-vite react svelte typescript vite vue vue3

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yugasun/micro-frontend-starter
• Owner: yugasun
• License: mit
• Created: 2022-08-08T11:54:56.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-30T06:57:00.000Z (about 1 year ago)
• Last Synced: 2025-04-10T22:53:45.505Z (about 2 months ago)
• Topics: micro-frontend, micro-frontends, qiankun, qiankun-vite, react, svelte, typescript, vite, vue, vue3
• Language: TypeScript
• Homepage:
• Size: 427 KB
• Stars: 69
• Watchers: 2
• Forks: 13
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Micro Frontend Starter

[![Qiankun](https://img.shields.io/badge/Framework-qiankun-6451ab)](https://qiankun.umijs.org/)

[![Vite](https://img.shields.io/badge/Develop-Vite-747bff)](https://vitejs.dev)

[![TypeScript](https://img.shields.io/badge/Language-TypeScript-blue)](https://www.typescriptlang.org/)

[![Vue3](https://img.shields.io/badge/Vue3-42b883)](https://vuejs.org/)

[![React](https://img.shields.io/badge/React-61dafb)](https://reactjs.org/)

[![Svelte](https://img.shields.io/badge/Svelte-ff3e00)](https://svelte.dev/)

[![Build](https://github.com/yugasun/micro-frontend-starter/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/yugasun/micro-frontend-starter/actions/workflows/ci.yml)

## Feature

-   [x] Micro Framework using [qiankun](https://qiankun.umijs.org/) 🔥

-   [x] Monorepo using [pnpm](https://pnpm.io/) 🔥

-   [x] Develop & build using [vite](https://vitejs.dev/) 🔥

-   [x] Support [Vue.js](https://vuejs.org/), [React.js](https://reactjs.org/), [Svelte.js](https://svelte.dev/) frameworks

-   [x] Auto develop and build commands.

-   [x] 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:

```shell

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

```

2. Install dependencies:

```shell

pnpm i

```

3. Start develop:

```shell

pnpm run dev

```

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

Develop for single application:

```shell

pnpm run dev --app main

```

1. Build:

```shell

pnpm run build

# or build for single application

pnpm run build --app main

```

5. Start by docker:

```shell

# start

pnpm run docker:up

```

## License

MIT License

Copyright (c) 2022 Yuga Sun