English|简体中文|Documentation|Discussions|WeChat
📖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
base application
1、Install
yarn add @micro-zoe/micro-app
2、import at the entrance
import microApp from '@micro-zoe/micro-app'
microApp.start()
3、Use components in page
<template>
<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 DEVELOP
FAQ
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.
For browsers that do not support CustomElements, they can be compatible by introducing polyfills. For details, please refer to: webcomponents/polyfills。
However, Proxy is not compatible for the time being, so the micro-app cannot be run on browsers that do not support Proxy.
Browser compatibility can be viewed: Can I Use
The general is as follows:
- desktop: Except IE browser, other browsers are basically compatible.
- mobile: ios10+、android5+
Must micro applications support cross-domain?
yes!
If it is a development environment, you can set headers in webpack-dev-server to support cross-domain.
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
}
If it is a production environment, you can support cross-domain through Configuration nginx.
Does it support vite?
Yes, please see adapt vite for details.
Does it support ssr?
Yes, please see nextjs, nuxtjs for details.
Contributors
License
MIT License