preface

Hello, guys. Today, I will continue to share with you the relevant knowledge about qiankun, a micro front-end. In the previous article, we have implemented a simple micro front-end application based on qiankun+vue2.0, and also realized the switching of history and hash routing modes. In this application, both the main application and the sub application use the Vue technology stack, which does not reflect the biggest feature of the micro front end (independent of the technology stack). Therefore, this paper will access a react sub application based on the original micro front-end application.

In addition, the purpose of this paper is only to reflect the characteristics that the micro front end has nothing to do with the technology stack, so here we only describe the simple steps and key codes of accessing the react project, and there will be no more details about more react related knowledge here.

Create react project

In order for the main application to access a react sub application, we need to create a react project first.

• Install the create react app scaffold (NPM install create react app - G)
• Create a react project react child with create react app
• After the project is created, first run the num run eject command to expose some configuration files in the project
• After the file is exposed, multiple config directories will appear. Find the webpack.config.js file in the config directory, locate the output attribute, add new configuration attributes: library and libraryTarget, and change the value of globalOjbect to: "window"
• Find webpackDevServer.config.js in the config directory and add headers in the return of module.exports: "access control allow origin": "*" setting allows cross domain
• Open the index.js file under src and encapsulate the code of the original rendering elements into a render function, which is easy to call by case.
  • 1. When specifying the container, you need to specify the selection range of elements to avoid conflicts with other applications
  • 2. Add window__ POWERED_ BY_ QIANKUN __ To determine whether the main application starts or the sub application runs independently
  • 3. Export three required methods: bootstrap, mount and unmount

Here, the related configuration of the sub application is basically completed and the conditions for accessing the main application have been met. Let's take a look at the key code implementation: (only the modified part of the key code is shown here. What is not mentioned means that it is changed. Just use the default code of the project)

• Installation of scaffold

npm install create-react-app -g

• Create project react child

create-react-app react-child

• Switch to the project directory and run the command to expose the relevant configuration files

npm run eject

• Modify webpack.config.js and add library and libraryTarget

// config/webpack.config.js
// ... omitted
output:{
	//... omitted
	globalObject: "window",
	library:'react-child',//Naming is up to you (optional)
	libraryTarget:'umd'
	//... omitted
}
// ... omitted

• Modify the webpackDevServer.config.js setting to allow cross domain

// config/webpackDevServer.config.js
// ... omitted
module.exports = function(proxy, allowedHost){
	return {
		headers:{
			"Access-Control-Allow-Origin":"*"
		}
		//... omitted
	}
}
// ... omitted

• src/index.js complete code

import React from 'react';
import ReactDOMfrom 'react-dom';
import './index.css';
import App from './App';

function render(props){
	const {container} = props;
	ReactDOM.render(
		<React.StrictMode>
			<App />
		</React.StrictMode>,
		container ? container.querySelector('#root'):document.getElementById('root') / / you need to delineate the optional range of elements here to avoid conflicts with other applications
	);
}

//Judge whether the application runs independently or the main application starts
if(window.__POWERED_BY_QIANKUN__){
	/* global __webpack_public_path__:writable*/ //This sentence will report an error if it is not annotated
	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;//Main application startup
}else{
	render({});//Independent operation
}

//Export 3 required methods
export async function bootstrap(props){}

export async function mount(props){
	render(props);
}

export async function unmount(props){
	ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root'): document.getElementById('root'));
}

Register react sub application in main application

According to the above steps, the relevant configurations of sub applications have been realized, and the access conditions have been basically met. Next, we need to modify the code in the main application and register the react sub application in the main application

• Modify App.vue
  • Add a router link in App.vue with the title react and the value of the to attribute "/ react"
  • Add a div box with id reactContainer under the router View tab
• Modify src/main.js: add the related configuration information of react sub application to the apps array for registration
  • name attribute value: 'react child'
  • entry: '//localhost:3000',
  • container: '#reactContainer;
  • activeRule: '#/react'

• App.vue

	<!--ellipsis-->
	<router-link to="/react">React</router-link>
	<div id="reactContainer"></div>
	<!--ellipsis-->

• main.js

//... omitted
const apps = [
	//... omitted
	{
		name:'react-child',
		entry:'//localhost:3000',
		container:'#reactContainer',
		activeRule:'#/react'
	}
	//... omitted
]
//... omitted

logo 404 and Solutions

So far, it has been realized to access a react sub application in the Vue main application. However, when we run the application, you will find that the sub application access is successful, but the rotating logo image in react is not loaded because webpack does not use the correct publicPath when loading resources
Officials have given two solutions

• Scheme 1: using the webpack runtime publicPath configuration, qiankun will inject a runtime publicPath variable before the micro application bootstrap. What we need to do is to add the following code at the top of the entry file:

__wepack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 	

• Scheme 2: another scheme is to set the publicPath configuration in output under webpack.config.js to an absolute path, for example:

{
	output:{
		publicPath: '//localhost:3000/'
	 }	
 }

Obviously, scheme 2 is not the most ideal, so we will configure it according to scheme 1. However, a flip up reveals this variable__ wepack_public_path __ In fact, we have already configured it, but why didn't it take effect? Let's take a closer look at scheme 1. Hey, at this time, you will find that it requires adding code at the top of the entry file. In this case, you need to add the code to the import statement, but we know that this is not allowed, Then we can only create a new public-path.js file, add the code to the file, and then import the file at the top of the entry file.
Let's look at the modified final code:

• public-path.js

if(window.__POWERED_BY_QIANKUN__){
	/* global __webpack_public_path__:writable*/ //This sentence will report an error if it is not annotated
	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;//Main application startup
}

• index.js

import './public-path';

// ... omitted
if(!window.__POWERED_BY_QIANKUN__){
	render({});//Independent operation
}

// ... omitted

summary

In this paper, we share the steps of accessing a react sub application, and analyze the problems and solutions of static resource 404. Finally, a react sub application access is perfectly realized.

Well, that's all for this sharing. Welcome to like, follow and comment