Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.