Build micro front end platform of UMI + Qiankun + antd

Time:2021-7-20

key word:

  • umi
  • qiankun
  • ant design pro
  • Non dynamic registration subapplication
  • Non dynamic load subapplication (routing)

background

The bank project needs a front-end middle platform to carry the application developed by each project team. This article is written after the work practice, which can be used for reference. As for the relevant content of the official website, this article is specially written, which is also because in practice, some parts of the official website are not perfect, which leads to the abnormal bumpy building process.

Build the main application project

The main application is usually a post class management platform, so I use ant Deisng Pro as the main application and create it with the following command:

reference resources:https://pro.ant.design/index-cn(bottom of page)

yarn create umi main-app

ant-design-pro
pro v4
ts
simple
[email protected]

Build sub application engineering

Use the following command to create the

yarn create @umijs/umi-app sub-app-1

Main application

Install Qiankun

yarn add qiankun

Install @ umijs / plugin Qiankun

yarn add @umijs/plugin-qiankun -D

Register subapplications

reference resources:
https://umijs.org/zh-CN/plugins/plugin-qiankun#a -Configuring subapplications during plug-in construction

In the config / config.ts file, add the following code:

The project name of the sub application is: sub-app-1
The port of the subapplication is 8001

{
  ...
  qiankun: {
    master: {
      apps: [
        {
          name: 'sub-app-1',
          entry: '//localhost:8001',
        },
      ],
    },
  },
}

Load subapplication (routing)

There is still a route to the subapplication.
In the config / config.ts file, follow the example of the following code and add it under the routes attribute:

{
  name: 'sub-app-1',
  icon: 'smile',
  path: '/sub-app-1',
  microApp: 'sub-app-1',
},

Sample file

I’m afraid you won’t. here we also provide a configured config / config.ts file.
config.ts

Subapplication

Install @ umijs / plugin Qiankun

yarn add @umijs/plugin-qiankun -D

Register the plug-in you just installed

reference resources:
https://umijs.org/zh-CN/plugins/plugin-qiankun# Step 1: plug in registration (configjs)

Add the following code to the. Umirc. TS file:

qiankun: {
 slave: {}
}

After adding, it is as follows:

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  qiankun: {
   slave: {}
  }
});

Modification of project name

Open the package.json file, and add the attribute name and corresponding attribute value in the first line.

Export the corresponding lifecycle hook

reference resources:
https://umijs.org/zh-CN/plugins/plugin-qiankun# Step 2: configure the runtime lifecycle hook (optional)

Add the following code to Src / app.ts. If app.ts does not exist, you need to create it yourself:

export const qiankun = {
  //Before application loading
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  //Trigger before applying render
  async mount(props) {
    console.log('app1 mount', props);
  },
  //Triggered after application is unloaded
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

effect

Main application effect

image.png

Sub application effect

image.png

GitHub source code

https://github.com/blueju/umi-mirror-docs/tree/umi-micro-fe-platform

epilogue

The above configurations are not dynamic registration subapplication or dynamic loading subapplication (routing), but in real projects, dynamic registration subapplication and dynamic loading subapplication (routing) are more needed.

TODO

  • Write a blog about how to dynamically register and load sub applications (routing)

First inSparrow document