How to create a micro-front-end container application using single-spa

This article introduces how to use single-spa to create micro-front-end container applications, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Micro-front-end framework single-spa: https://zh-hans.single-spa.js.org/

Single-spa: https://single-spa.js.org/ is a framework for implementing a micro-front-end architecture.

There are three types of micro front-end applications in the single-spa framework:

1. Single-spa-application / parcel: micro-applications in micro-front-end architecture, which can use frameworks such as vue, react, angular, etc.

2. Single-spa root config: create micro-front-end container applications.

3. Utility modules: common module applications, non-rendering components, for micro-applications that share javascript logic across applications.

Create a container application

Install single-spa scaffolding tool: npm installcreate-single-spa@2.0.3-g

Create a micro-front-end container application: create-single-spa

1. Fill in container in the application folder

two。 Application selection single-spa root config

3. Fill in study for the name of the organization

The organization name can be understood as the team name, the micro-front-end architecture allows multiple teams to develop applications together, and the organization name can identify which team the application is developed by.

The naming convention for application names is @ organization name / application name, such as @ study/todos.

4. Launch the application: cd. / singletest & & npm start

5. Access to applications: localhost:9000

Container default code resolution

Src/xx-root-config.js

Index.ejs

So much for sharing on how to use single-spa to create micro-front-end container applications. I hope the above content can be of some help and learn more. If you think the article is good, you can share it for more people to see.