Here do not speak various advantages and disadvantages of micro front, directly in assuming that you are responsible for a background management system development, all the business module is packaged in a project, with the growing of business, compile more slowly, you can expect from the old project will be new business for independent development, deployment, in the form of micro application embedded in the old project.

This article is for those who want to embed microapplications in old and new projects without requiring you to make changes to old projects. If this article has helped you, please go to 👍!

The core elements of

  • Build the production environment code to output the JSON required by the remote component
  • Get the JSON data through an Ajax request and pass it to the remote component

New project setup

For the construction of the project, I won’t go into detail here, but instead read the documentation for the Genesis Project’s quick start

Modifying compiled code

import path from 'path';
import fs from 'fs';
import { Build } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = async() = > {/** * Create a compilation instance */
    const build = new Build(ssr);
    /** * Start executing the compiler to build the production application package */
    await build.start();
    /** * After compiling, create a renderer that outputs what the remote component needs */
    const renderer = ssr.createRenderer();
    /** * CSR render output JSON */
    const result = await renderer.render({ mode: 'csr-json' });
    /** * Save the JSON to the client directory */
    fs.writeFileSync(
        path.resolve(ssr.outputDirInClient, 'app.json'),
        JSON.stringify(result.data, null.4),
        'utf8'
    );
};
start();

Copy the code

If you follow the official documentation, you just need to modify the genesis. Build. ts file yourself. If you customize the file name, just create a renderer after the await build.start() method is finished and save the CSR rendering result to a JSON file.

After compiling, you get something like this

client

Old project remote component loading

Assuming that the base path for your static resources is/ ssr-genesis/, you can access this file via /ssr-genesis/app.json.

Install remote components on your old project

npm install @fmfe/genesis-remote axios
Copy the code

On your route, use the remote component and load it.

<template> <div class="app"> <RemoteView :fetch="fetch" /> </div> </template> <script lang="ts"> import Vue from 'vue'; import axios from 'axios'; import { RemoteView } from '@fmfe/genesis-remote'; export default Vue.extend({ components: { RemoteView }, methods: { async fetch() { const res = await axios.get('/ssr-genesis/app.json'); if (res.status === 200) { return res.data; } return null; }}}); </script>Copy the code

Multi-history mode support

Router.push (‘/ XXX ‘) will generate multiple histories. To solve this problem, you can use abstract mode in your child application. Or use @FMfe/Geneses-app to help you deal with bugs that occur when multiple Router instances use historical mode. Note that you need to use the Router packaged with @FMfe/Geneses-app for both old and new projects

expand

/** * CSR renders output HTML */
const result = await renderer.render({ mode: 'csr-html' });
/** * Save the HTML to the client directory */
fs.writeFileSync(
    path.resolve(ssr.outputDirInClient, 'index.html'),
    result.data
    'utf8'
);
Copy the code

If you just want to do a CSR project, just render the HTML and deploy the client directory to the server as usual for a CSR project.

conclusion

Genesis is just a Vue SSR rendering library, it’s not a framework, it just gives you basic SSR rendering capabilities.