micro-app

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.

The micro-app has nothing to do with the technology stack, nor is it tied to the business, and can be used in any front-end framework.

View Demo View Github

Getting Start

The micro front-end is divided into base application and micro application. We list the modifications required for base application and micro application respectively, and introduce the use of micro-app in detail.

base application

The base application takes the vue framework as an example

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、Assign a route to the micro application

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router' // [email protected]
import MyPage from './my-page.vue'

Vue.use(VueRouter)

const routes = [
  {
    // ? Non-strict matching, /my-page/xxx will be matched to the MyPage component
    path: '/my-page/*', 
    name: 'my-page',
    component: MyPage,
  },
]

export default routes

4、Use components in my-page pages

<!-- my-page.vue -->
<template>
  <div>
    <h1>micro application</h1>
    <!-- name is the application name, globally unique, url is the html address -->
    <micro-app name='app1' url='http://localhost:3000/' baseurl='/my-page'></micro-app>
  </div>
</template>

Please refer to Routing Chapter for the relationship between url and micro application routing

micro application

The micro application takes the react framework as an example

1、Add basename for route(If the base application is history route and the micro application is hash route, it is not necessary to set the baseurl, this step can be skipped)

// router.js
import { BrowserRouter, Switch, Route } from 'react-router-dom'

export default function AppRoute () {
  return (
    // ? the micro application can get the baseurl issued by the base application through window.__MICRO_APP_BASE_URL__
    <BrowserRouter basename={window.__MICRO_APP_BASE_URL__ || '/'}>
      <Switch>
        ...
      </Switch>
    </BrowserRouter>
  )
}

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

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

Then micro front-end can be rendered normally, and the react micro application is embedded in the vue base application. The effect is as follows：

image

The above lists the usage of react and Vue framework. They can be combined freely. For example, the base application is react, the micro application is Vue, or the base application is Vue, the micro application is react, or both the base application and the micro application are react and Vue. The 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.

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" ^_^

If you are using it, please tell us

development

1、Clone

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

2、Install dependencies

yarn bootstrap

3、Run project

yarn start