Begin to build

This document is suitable for building micro front end applications from 0 and learning micro front end demo

Current configuration version

"@ umijs/plugin - qiankun", "^ 2.18.3", "umi" : "^ 3.3.3"

I. Configuration of base application (main application)

Create a new folder and name it mainApp

Enter mianApp and execute the following commands

Yarn create @umijs/umi-app // create a project with the umi official tool yarn // install the yarn add @umijs/ plugin-qiankun-d // install the qiankun plugin

Register Qiankun and write the configuration item at.umirc.ts

/mainApp/.umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { path: '/', component: '@/pages/index'}, // Registrate subroutes {name: 'app1', path: '/app1', microApp: 'app1',// Name: 'app1',// Name: 'app1', microApp: 'app1',// Name: 'app1',// Name: 'app1',// Registrate Qiankun: [{name: 'app1', // unique id entry: '//localhost:2000', // HTML entry},], // jsSandbox: // prefetch: true, // prefetch is enabled, default is true},}, // end of new config item});

Can also be a new/mainApp/config/config. Ts configured in the above configuration, you may refer to the specific separation umi document https://umijs.org/zh-CN/docs/…

Configure child applications

Create a new folder named microAPP1

Enter MicroApp and execute the following commands

Yarn create @umijs/umi-app // create a project with the umi official tool yarn // install the yarn add @umijs/ plugin-qiankun-d // install the qiankun plugin

Add the QIANKUN configuration item

/microApp1/.umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, routes: [ { path: '/', component: '@ / pages/index'},], / / the following configuration items for qiankun: {slave: {}}});

Configure the life hook (optional)

Create a new file called app.ts under /microApp/ SRC and copy the following

Export const qiankun = {// Async bootstrap(props) {console.log('app1 bootstrap', props); }, // trigger async mount(props) before applying render {console.log('app1 mount', props); }, // trigger async unmount(props) after the application is unmounted {console.log('app1 unmount', props); }};

Add the name attribute to package.json

/microApp1/package.json {// Make sure the name is the same as the microapplication name of the main application. "name": "app1",... }

Configure the port to be the same as the port configured by the main application

Create a new.env file in the microApp1 directory and write the following

PORT=2000

To identify whether the child application was successfully configured, it is written as follows

/microApp1/src/page/index.tsx import React from 'react'; import styles from './index.less'; Export default () => {return (<div> <h1 className={styles.title}> child 1</h1> </div>); }

Three, start,

Run child application

Enter microApp1 for execution

yarn start

Open your browser and type localhost:2000 to see

Run the main application

Go into MainApp and execute

yarn start

Go to the browser

Switch to the child application and type the base application address into localhost:8081/app1, as you can see

Microapplication configuration is successful

4. Relevant documents

Official configuration document

https://umijs.org/zh-CN/plugi…