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.
<!-- my-page.vue --><template><!-- 👇 name is the app name, url is the app address --><micro-appname='my-app' url='http://localhost:3000/'></micro-app></template>
micro application
Set cross-domain support in the headers of webpack-dev-server
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.
micro-zoe/micro-app
English|简体中文|Documentation|Discussions|WeChat
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
2、import at the entrance
3、Use components in page
micro application
Set cross-domain support in the headers of webpack-dev-server
The above micro front-end rendering is completed, and the effect is as follows:
More detailed configuration can be viewed Documentation.
If you're interested in this project, you're welcome to mention pull request, and also welcome your "Star" ^_^
development
1、Clone
2、Install dependencies
3、Run project
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:
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.
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