This is the 14th day of my participation in Gwen Challenge. For details, see Gwen Challenge.

Inspired by the trend in front-end Web development, microfronts allow you to build, test, and deploy front-end applications independently, as microservices allow you to break down the back end into smaller pieces. Depending on the micro-front-end framework you choose, you can even have multiple micro-front-end applications — written with React, Angular, Vue, or other tools — co-exist seamlessly within the same large application! It was outlined here in Understanding the Microfront: A Microservice for Front-end Web Development.

In this article, you will use single-SPA to develop an application consisting of a micro front end that will use Travis CI to set up continuous integration. Each CI pipeline will bind JavaScript to the microfront application, and finally, we’ll update one of the microfront applications to see how it can be deployed into production independently of the other microfront applications.

An overview of the

Before discussing the steps, let’s take a quick look at the components of the demo application, which consists of four sub-applications:

  1. A container application, acting as the primary container, coordinates the installation and uninstallation of micro-front-end applications
  2. A micro front navigation bar application that always appears on the page
  3. A micro front endaccountApplication, only displayed when active
  4. A micro front endproductsApplications are also only displayed when active

Each of the four applications is located in a separate code repository and can be found on GitHub.

The end result is pretty simple in terms of the user interface, but to be clear, the user interface is not the point here. If you are learning on your own machine, by the end of this article you will also have all the underlying infrastructure you need to start using your own microfront-end applications!

Before the project starts, create a directory to hold all the micro front-end applications by executing the following command:

mkdir crayon-micro-apps
Copy the code

Creating a container application

Follow these steps to create the container application (also known as root configuration) as the entry point for all microfrontend applications:

cd crayon-micro-apps
mkdir crayon-micro-root
cd crayon-micro-root
npm init
Copy the code

Follow the CLI steps to enter the corresponding information. The root-config mode recommended by single-spa is not used in this example. To install serve, execute the following command:

npm install serve --save
Copy the code

After the installation is complete, open package.json and add the startup script:

"serve": "serve -s -l 9010"
Copy the code

Create a new file index. HTML in the project root directory with the following code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Crayon Vue Microfrontends</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="importmap-type" content="systemjs-importmap" /> <script type="systemjs-importmap"> { "Imports" : {" single - spa ":" https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js ", "vue" : "Https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js", "vue - the router" : "Https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"}} < / script > < link rel = "preload" Href = "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as = "script" Crossorigin = "anonymous" / > < link rel = "preload" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" as = "script" crossorigin="anonymous" /> <script SRC = "https://unpkg.com/[email protected]/dist/import-map-overrides.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js" > < / script > < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js" > < / script > < / head > < body > <import-map-overrides-full show-when-local-storage="overrides-ui" ></import-map-overrides-full> </body> </html>Copy the code

Create a micro front end App

Next, the CLI tool create-single-spa will be used to create the micro front end application. For detailed installation instructions, please refer to the official documentation.

Follow the steps above to create the navigation bar microfront application named Crayon-Micro-NavBar.

mkdir crayon-micro-navbar
cd crayon-micro-navbar
create-single-spa
Copy the code

Follow the CLI instructions:

  1. choosesingle-spa application / parcel
  2. choosevue
  3. Enter the organization namecrayon

Crayon-micro-account and Crayon-Micro-Products were created in the same way.

To create a Crayon-micro-Account use vue3 and to create a Crayon-micro-products use vue2.

After this is done, modify the startup information slightly, mainly to configure port, reduce vue-cli-plugin-single-spa version to ^1.3.2, add dependency “systemjs-webpack-interop”: “^2.3.7”, modify package.json file:

"serve": "vue-cli-service serve --port 9011",
Copy the code
  • crayon-micro-navbar:9011
  • crayon-micro-account:9012
  • crayon-micro-products:9013

NPM install needs to be re-executed because the version of the dependent library has been changed.

Go to the project directory crayon-micro-navbar/ SRC and add the file set-public-path.js as follows:

import { setPublicPath } from "systemjs-webpack-interop";

setPublicPath("crayon-navbar");
Copy the code

Import the above file in the main.js header:

import "./set-public-path";
Copy the code

Next modify crayon-Micro-navbar /account as follows:

import { setPublicPath } from "systemjs-webpack-interop";

setPublicPath("crayon-account");
Copy the code

Crayon-micro-navbar/Products, as follows:

import { setPublicPath } from "systemjs-webpack-interop";

setPublicPath("crayon-products");
Copy the code

Register the micro front end application with the container application

Each application includes its own startup script, which means that each application will run locally on its own development server during local development. As you can see above, the navigation bar application is on port 90011, the Account application is on port 9012, and the Products application is on port 9013.

Open the file crayon-micro-root/index.html and register three apps:

<script type="systemjs-importmap"> { "imports": { "crayon-navbar": "http://localhost:9011/js/app.js", "crayon-account": "http://localhost:9012/js/app.js", "crayon-products": "http://localhost:9013/js/app.js", "single-spa": "Https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js", "vue" : "Https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js", "vue - the router" : "Https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"}} < / script >Copy the code
<script> (function () { Promise.all([ System.import("single-spa"), System.import("vue"), System.import("vue-router"), ]).then(function ([singleSpa, Vue, VueRouter]) { Vue.use(VueRouter); singleSpa.registerApplication( "crayon-navbar", () => System.import("crayon-navbar"), (location) => true ); singleSpa.registerApplication( "crayon-account", () => System.import("crayon-account"), (location) => location.pathname.startsWith("/account") ); singleSpa.registerApplication( "crayon-products", () => System.import("crayon-products"), (location) => location.pathname.startsWith("/products") ); singleSpa.start(); }); }) (); </script>Copy the code

Run locally

For better viewing, add a simple UI for each micro-front-end application, which I won’t cover here. Open the four terminals, execute the corresponding APP, open the browser and enter: http://localhost:9010/, you can see the following effect:

conclusion

This article designed the code repository address: github.com/QuintionTan… This is just a simple implementation, but some development specifications and tools need to be planned if they need to be implemented in the team.