# Overview

This user manual will introduce how to integrate open documentation into your project. The integration technology mainly relies on the qiankun framework. Interested students can check its official documentation: https://qiankun.umijs.org/zh/guide. Students who don’t want to study in detail can also directly follow the following steps for rapid development. The following will take a project built with vue-cli as an example. The use of other technology stacks is similar. Open documents can be accessed individually. Here we take https://demo.fizzgate.com/module/open-document/index.html?id=1437635360536920065 as an example. You can also view the effect through "Document Demonstration" on the top menu.

# Front-end development steps

  1. Install qiankun dependency on the main application
yarn add qiankun
  1. Modify the webpack configuration of the main application. Here we take the project generated by vue-cli as an example to modify the devServer configuration of the vue.config.js file. (1) Set the request header to cross domain (2) Set the proxy access address of the open document (3) Set the interface access address of the open document
devServer: {
     // port: 9527,
     headers: {
         "Access-Control-Allow-Origin": "*"
     },
     proxy: {
         '/module/': {
             target: 'https://demo.fizzgate.com',
             changeOrigin: true
         },
         '/api': {
             target: 'https://demo.fizzgate.com/api',
             ws: true,
             changeOrigin: true,
             pathRewrite: {
                 '^/api': '/'
             }
         }
     }
}
  1. Load the main application and open the document

(1) Set up a container to place the open document micro front-end application

<div class="micro" id="micro"></div>

If you want to display a custom loading animation during the loading process of a micro application, you can place a loading component inside the micro container, such as:

<div class="micro" id="micro"><Loading /></div>

(2) Manually load the Open Document micro-application in the mounted hook function, and uninstall the micro-application in the beforeDestroy hook function. Note: The documentId in props is the id value in the address "https://demo.fizzgate.com/module/open-document/index.html?id=1437635360536920065".

import { loadMicroApp } from "qiankun";

export default {
   data() {
     return {
       app: null
     };
   },
   methods: {
     loadApp(loadMicroApp) {
       this.app = loadMicroApp({
         name: "openDocument", // unique identifier
         entry: "/module/open-document/index.html", // Access address
         container: "#micro", // Mount element
         props: {
           documentId: '1437635360536920065' // Pass in the document set id
         }
       });
     },
   },
   mounted() {
     this.loadApp()
   },
   beforeDestroy() {
     this.app.unmount();
   }
};
  1. Micro applications can also be pre-loaded as needed
import { prefetchApps } from 'qiankun';

prefetchApps([
   { name: 'openDocument', entry: "/module/open-document/index.html" }
]);
  1. After the main application loads the open document micro-application, there may be style pollution problems (because qiankun’s CSS sandbox adopts non-strict mode). Developers can fine-tune it as needed.

# Deployment

  1. If you use nginx proxy during deployment, it is recommended to add the following configuration:
server {
     gzip on;
     gzip_static on;
     gzip_buffers 4 16k;
     gzip_http_version 1.1;
     gzip_comp_level 5;
     gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
     gzip_disable "MSIE [1-6]\.";
     gzip_vary on;
     location ^~ /module/ {
         add_header Access-Control-Allow-Origin *;
         proxy_pass https://demo.fizzgate.com/module/;
     }
     location ^~ /api {
         rewrite ^/api/(.*) /$1 break;
         proxy_pass https://demo.fizzgate.com;
     }
}
  1. After modifying the configuration, restart nginx.

← Operation and maintenance related →