Create a micro frontend using React, Vue and Single SPA

This article will introduce you to how to create a micro front end using React, Vue and Single SPA. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Single SPA

Single SPA is a javascript framework for front-end microservices.

It allows you to use multiple frameworks in a single-page application, so that you can split the code by function and enable Angular, React, and Vue.js programs to run together.

You may be used to the CLI of React and Vue. These tools can quickly create projects and prepare webpack configuration, dependencies, boilerplate code, etc.

If you are used to this kind of operation, you may find the first half of this article a bit tedious. Because we are creating everything from scratch, including installing all required dependencies and creating webpack and babel configurations from scratch.

Environment and configuration

First create a new directory under the terminal and enter it:

mkdir single-spa-app

cd single-spa-app

Next, initialize the package.json file:

npm init -y

Then install all dependencies required for your project. In order to make it clear to everyone what is installed, I have broken them down into separate steps here.

Install dependencies

Install regular dependencies

npm install react react-dom single-spa single-spa-react single-spa-vue vue

Install babel dependencies

npm install @babel/core @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react babel-loader --save-dev

Install Webpack dependencies

npm install webpack webpack-cli webpack-dev-server clean-webpack-plugin css-loader html-loader style-loader vue-loader vue-template-compiler --save-dev

After all dependencies are installed, create the directory structure.

We put the project code into the src directory. Include subfolders for each program in the directory. Continue to create directories for the react and vue programs in the src directory:

mkdir src src/vue src/react

Configure webpack and babel below.

Environment Configuration

Configuration Webpack

In the root directory of the main program, create a webpack.config.js file and add the following content:

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: {
    'single-spa.config': './single-spa.config.js',
  },
  output: {
    publicPath: '/dist/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }, {
        test: /\.js$/,
        exclude: [path.resolve(__dirname, 'node_modules')],
        loader: 'babel-loader',
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  node: {
    fs: 'empty'
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    },
    modules: [path.resolve(__dirname, 'node_modules')],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  devtool: 'source-map',
  externals: [],
  devServer: {
    historyApiFallback: true
  }
};

Configuration babel

Create the .babelrc file in the root directory and add the following content:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
    ["@babel/preset-react"]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

Initialize Single-spa

This step is to register your application , used to tell single-spa the timing and method to find, load and uninstall the program.

In the webpack.config.js file, set the entry to single-spa.config.js.

Create this file in the root directory of the project and configure it.

single-spa.config.js

import { registerApplication, start } from 'single-spa'

registerApplication(
  'vue', 
  () => import('./src/vue/vue.app.js'),
  () => location.pathname === "/react" ? false : true
);

registerApplication(
  'react',
  () => import('./src/react/main.app.js'),
  () => location.pathname === "/vue"  ? false : true
);

start();

This file is used to register each part developed for the main single-page application using different frameworks. Each time registerApplication is called, a new application is registered, which accepts three parameters:

1. The name of the application
2. The function to be loaded (the entry point to be loaded)
3. Function used to activate (logic used to tell whether to load the app)

Next you need to create code for each app.

React application

Creates the following two files in the src/react directory:

touch main.app.js root.component.js

src/react/main.app.js

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Home from './root.component.js';

function domElementGetter() {
  return document.getElementById("react")
}

const reactLifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Home,
  domElementGetter,
})

export const bootstrap = [
  reactLifecycles.bootstrap,
];

export const mount = [
  reactLifecycles.mount,
];

export const unmount = [
  reactLifecycles.unmount,
];

src/react/root.component.js

import React from "react"

const App = () => <h1>Hello from React</h1>

export default App

Vue application

Create the following two in the src/vue directory Files:

touch vue.app.js main.vue

src/vue/vue.app.js

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import Hello from './main.vue'

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue',
    render: r => r(Hello)
  } 
});

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export const mount = [
  vueLifecycles.mount,
];

export const unmount = [
  vueLifecycles.unmount,
];

src/vue/main.vue

<template>
  <p>
      <h1>Hello from Vue</h1>
  </p>
</template>

Next, in Create an index.html file in the root directory of the program:

touch index.html

index.html

<html>
  <body>
    <p id="react"></p>
    <p id="vue"></p>
    <script src="/dist/single-spa.config.js"></script>
  </body>
</html>

Update Package.json with a script

Add in package.json Startup and build scripts:

"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack --config webpack.config.js -p"
}

Run the program

Execute the program by running start:

npm start

Now accessible via the following URL:

# 渲染基于所有框架的程序
http://localhost:8080/

# 只渲染 react
http://localhost:8080/react

# 之渲染 vue
http://localhost:8080/vue

Summary

Except for the configuration at the beginning, other work is very easy. It would be nice if in the future Single-spa could add a CLI to handle boilerplate and initial project setup.

If you need a micro-frontend type of architecture, then Single-spa is undoubtedly the most mature method now.

Original text: https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op

Author: Nader Dabit

Related recommendations:

2020 front-end vue interview questions summary (with answers)

Vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Create a micro frontend using React, Vue and Single SPA. For more information, please follow other related articles on the PHP Chinese website!