Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

In the previous chapter, we created a child application and made sure it started properly. In this chapter, we will continue where we left off and connect our child application to the root configuration.

Root configuration

Let’s configure the root file first.

microfrontend-layout.html

In our previous configuration, we used the route provided by single-SPA. In the microfrontend-layout. HTML file, we went into this file to configure the route.

<single-spa-router>
  <main>
    <route default>
      <application name="@single-spa/welcome"></application>
    </route>
    <route path="navbar">
      <application name="@navbar-public/navbar"></application>
    </route>
  </main>
</single-spa-router>
Copy the code

You can see that there are two routes: default and navbar. Let’s first look at navbar, our new module

<application name="@navbar-public/navbar"></application>
Copy the code

Remember @navbar-public/navbar! You’ll have to take the test later

index.ejs

After we have configured the route to ‘@navbar-public/navbar’, we need to introduce this path in the file (remember the path from which this file started!).

<script type="systemjs-importmap">
    {
      "imports": {
        "@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"."@navbar-public/navbar": "http://localhost:8080/js/app.js"."@main/root-config": "//localhost:9000/main-root-config.js"
      }
    }
  </script>
Copy the code

Add content as follows: “@ navbar – public/navbar” : “http://localhost:8080/js/app.js”,

The child application

First we create a file that is the same class as main.js, set-public-path.js

set-public-path.js

Add this code after the file is created

import { setPublicPath } from 'systemjs-webpack-interop'

setPublicPath('@navbar-public/navbar'.2)
Copy the code

The name of @navbar-public/navbar is the same as the name of the root project. If you’re thinking about it, you can see that @navbar-public/navbar is the same as the name of the root project

Ok, that’s it!

run

Here we start the child application service first, then start the root configuration service; Then jump to

http://localhost:9000/navbar
Copy the code

OK, look at the effect!

conclusion

This chapter officially taps into my child application, but that’s not enough! First of all, a normal business login system needs login page, theme frame, page routing, etc., here our requirements are still far away, and will be optimized again after, if you like, please pay attention to me!