English｜简体中文｜Documentation｜Discussions｜Gitter

Introduction

micro-app is a micro front-end framework launched by JD Retail. It renders based on webcomponent-like and realizes the micro front-end from component thinking, it aiming to reduce the difficulty of getting started and improve work efficiency.

It is the lowest cost framework for accessing micro front-end, and provides a series of perfect functions such as JS sandbox, style isolation, element isolation, preloading, resource address completion, plugin system, data communication and so on.

micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of micro application of the framework.

How to use

The micro front end is divided into a base application (also called main application) and a micro application.

Here is a common example: the base application uses the Vue framework, uses history routing, the micro application uses the react framework, and uses hash routing. We list the modifications that need to be made by the base application and the micro application, and introduce the use of micro-app in detail.

base application

1、Install

yarn add @micro-zoe/micro-app

2、import at the entrance

// main.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

3、Use components in page

<!-- my-page.vue -->
<template>
  <!-- 👇 name is the app name, url is the app address -->
  <micro-app name='my-app' url='http://localhost:3000/'></micro-app>
</template>

micro application

Set cross-domain support in the headers of webpack-dev-server

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
},

The above micro front-end rendering is completed, and the effect is as follows:

More detailed configuration can be viewed Documentation.

Contribution

If you're interested in this project, you're welcome to mention pull request, and also welcome your "Star" ^_^

development

1、Clone

git clone https://github.com/micro-zoe/micro-app.git

2、Install dependencies

yarn bootstrap

3、Run project

yarn start

For more commands, see DEVELP

What are the advantages of micro-app? It is easy to use and low invasive. It only needs to change a small amount of code to access the micro front-end, and provides rich functions at the same time.

How compatible? The micro-app relies on two newer APIs, CustomElements and Proxy.

Must micro applications support cross-domain? yes!

Does it support vite?

Does it support ssr?

Contributors

License

MIT License