qiankun configure the application and his son mount problem

This two-day study at qiankunthe micro front-end implementation, just write two projects are using umi and applications are father and son relationship, before the main application is to add iframethe sub-applications bringing in, and now want to transform into qiankunto two application linked to the way try this library.

Forewarned parent application version umi 2.9.0, umi sub-application version 2.10.0.

Sons average specific operation is applied by yarn add @umijs/plugin-qiankunadding qiankun plug parent application .umirc.tsadd the following:

const config:IConfig = {
  ...,
  routes: [
    ...,
    {
      path, '/app' // 这里是子应用的路由
    }
  ],
  plugins: [
    ...,
    [
      '@umijs/plugin-qiankun',
      {
        master: {
          apps: [
            {
              name: 'app',
              entry: '//localhost:9090',
              base: '/app',
              history: 'browser',
              mountElementId: 'root-slave',  // 注意这里是子应用要挂载在父应用上的节点id
            }
          ],
          jsSandBox: true,
          prefetch: true,
        }
      }
    ]
  ],
  proxy: {} // 如果是开发模式记得配置代理调用子应用服务端
}

Once configured, for example, may come at the root component layout/index.tsxunder <div>{props.children}<div id='root-slave'></div></div>which root-slavenode is the son of div applications will be mounted, it is very crucial, if not, you will be prompted Uncaught (in promise) Error: Target container is not a DOM element.an error and the like, there is a way to create a new sub-application components such pages/subAppContainer.tsxcomponents, then:

import React from 'react';
export default () => {
  return (
    <div id='root-slave'></div>
  )
}

This time .umirc.tsthe routes which should be added component:

{
  path: '/app', component: './subAppContainer'
}

Configuration app.ts, add a child application lifecycle functions:

export const qiankun = new Promise(resolve => {
  resolve({
    lifeCycles: {
      beforeLoad: props => {
        console.log('beforeLoad:', props);
      },
      beforeMount: props => {
        console.log('beforeMont:', props);
      },
      afterMount: props => {
        console.log('afterMount:', props);
      },
      beforeUnmount: props => {
        console.log('beforeUnmount:', props);
      },
      afterUnmount: props => {
        console.log('afterUmount:', props);
      },
    },
  });
});

So far the main application to configure almost next sub-application configuration

Adding pages/document.ejsto modify the root node id app-slaveor what other name, configuration .umirc.js:

export default {
  ...,
  plugins: [
    ...,
    [
      '@umijs/plugin-qiankun/slave',
      {
        // 如果有其他配置请参照https://github.com/umijs/umi-plugin-qiankun里面进行配置
      },
      base: '/app',
      mountElementId: 'app-slave' // 与`document.ejs`的根节点id保持一致
    ]
  ]
}

Prior to the application server sub-prefix /api, in order to avoid conflict with the main application, the application server sub-prefix instead /app/api.
So basically completed the transformation, the biggest problem encountered in the process is the problem of sub-mount applications, if you encounter other problems can also go umi warehouse mentioned issue.

qiankun configure the application and his son mount problem

Guess you like