Begin to build

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

Current Version

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

1. Configuring the Base Application (main Application)

Create a new folder named mainAPP

Go to mianApp and run the following command

Yarn Create @umijs/umi-app // Use the OFFICIAL UMI tool to create project YARN // Install dependency YARN add @umijs/plugin- Qiankun -d // Install the qiankun plug-inCopy the code

Register qiankun and write configuration items in.umirc.ts

/mainApp/.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',},routes: [{path: '/'.component: '@/pages/index' },
		// Register child routes
    {
      name: 'app1'.path: '/app1'.microApp: 'app1'.// Corresponds to the name registered in the previous step}].// Registered qiankun application
  qiankun: {
    master: {
      // Register sub-application information
      apps: [{name: 'app1'./ / the only id
          entry: '//localhost:2000'.// html entry},].// jsSandbox: true, // whether to enable js sandbox, default is false
    // Prefetch: true, // Whether to enable prefetch. The default value is true}},// Add a configuration item
});

Copy the code

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

2. Configure sub-applications

Name the new folder microAPP1

Enter microApp and run the following command

Yarn Create @umijs/umi-app // Use the OFFICIAL UMI tool to create project YARN // Install dependency YARN add @umijs/plugin- Qiankun -d // Install the qiankun plug-inCopy the code

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: {}}});Copy the code

Configure health hooks (optional)

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

Export const qiankun = {// Async bootstrap(props) {console.log('app1 bootstrap', props); }, // Render before triggering async mount(props) {console.log('app1 mount', props); }, // Async unmount(props) is triggered after the application is unmounted {console.log('app1 unmount', props); }};Copy the code

Add the name attribute to package.json

// microApp1/package.json {// The following name is the configuration item. Make sure that the name is the same as the name of the microapp registered by the main application. }Copy the code

The configuration port must be the same as that configured for the active application

Create a. Env file in the microApp1 directory and write the following

PORT=2000
Copy the code

To indicate whether the child application was successfully configured, it would be 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}>The child application 1</h1>
    </div>
  );
}
Copy the code

Three, start,

Run child application

Access microApp1

yarn start
Copy the code

Open your browser and type localhost:2000

Running the main application

Enter mainApp

yarn start
Copy the code

Open a browser

Switch the sub-application and enter localhost:8081/app1 in the address bar of the base application

The microapplication configuration is successful

Iv. Relevant documents

Official configuration document

Umijs.org/zh-CN/plugi…