Build micro front end platform of UMI + Qiankun + antd


key word:

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


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: of page)

yarn create umi main-app

pro v4
[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: -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.


Install @ umijs / plugin Qiankun

yarn add @umijs/plugin-qiankun -D

Register the plug-in you just installed

reference resources: 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: 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);


Main application effect


Sub application effect


GitHub source code


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.


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

First inSparrow document