Implementation Example of react Project from New to Deployment

Launch a new project

This paper mainly records the process of working a new project from 0-1 recently, and mainly records three nodes, type selection, runtime and online.

Project selection

react scaffold initialization, cra (create-react-app) and umi are popular in the community, and umi, which is a comparison project, is finally selected from the following points.

Easy to use, out of the box. umi has many built-in functions, but it also brings many limitations. For example, it requires learning cost to provide its own ecological plug-in for the project structure. cra initialization can be started by simply selecting templates, without additional learning cost (even if vue players come over, they will not bear it). Extensibility, modify webpack configuration. cra provides eject (irreversible operation) which is completely exposed to self-control, losing the original intention of wanting simple configuration at first, or using react-app-rewired and customize-cra can be seen here. When umi needs to modify webpack configuration, it can write files directly (based on webpack-chain), and also provides a running configuration. Ecology, umi is open source by Ali, and there are many plug-ins associated with their open source, such as the popular antd and qiankun. Official website provides a lot of practical guidance, and it is a Chinese document (some people will tend to this). cra is concise and only responsible for the work of one scaffold (easy to understand the internal implementation, and problems can be quickly located and solved).

Finally, considering that a project needs to be built quickly and many shaped plug-ins are needed, umi is adopted. antd smells good! ! ! @ umijs/plugin-model, it is recommended that this plug-in understand the internal practice and basically master the data management.

Runtime

umi provides app. ts, runtime configuration file, can extend the ability of runtime, simple understanding is that rendering your page before the operation can be placed here. This concept can be class

Compared with storybook (preview. js), if you want to implement it yourself, you can insert script into the corresponding html. There will be 1 project related content here, because the project needs to be embedded in the existing project, so we adopt iframe, which inevitably requires communication and iframe size adaptation.

iframe communication, because the domain is not 1, so take, window. postmessage. In order to maintain the readability of data, it is recommended to define the corresponding event transmission content, so as to avoid the difficulty of later maintenance. If frequent communication is needed, it is recommended to adopt the micro-front-end scheme.

iframe adaptive, iframe-resizer plug-in to help us solve, remember that embedded and embedded need to be installed, otherwise it is impossible to communicate and adapt. There is a problem here. When the page is embedded, body node 1 cannot be enlarged internally, so it is necessary to use the custom calculation method provided by iframe-resizer to provide the corresponding method in the sub-page. The code is as follows:

Subsystem

import 'iframe-resizer/js/iframeResizer.contentWindow.js';
//  If embedded, turn on listening at runtime 
const iframeInit = () => {
 if (parent !== window) {
  (window as any).iFrameResizer = {
   heightCalculationMethod: () => {
    return document.body.children[0].clientHeight;
   },
  };
  window.onmessage = (event: any) => {
   if (Array.isArray(event.data)) {
    if (event.data[0] === ' Event name ') {
     console.log(event.data[1]) //  Event parameter 
    }
   }
  };
  parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
 }
};

iframeInit();

Go online

After one round of packing, it finally went online. Here we mainly talk about how nginx configures forwarding requests.

During development, if interfaces to multiple different domains are required, the first reaction of the front end is to configure proxy. I was a little confused when I went online.

 proxy: {
  '/api': {
   target: 'http://aaa.com',
   changeOrigin: true,
   pathRewrite: { '^/api': '' },
  },
  '/b-api': {
   target: 'http://bbb.com/',
   changeOrigin: true,
   pathRewrite: { '^/b-api': '' },
  },
 },

The configuration of nginx is as follows

server {
  listen 80;
  server_name  Access address ;
  set $rooturi "xxxx/dist";
  location ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ {
   expires 365d;
   root $rooturi;
  }
  location ^~/api/ {

   rewrite ^/api/(.*)$ /$1 break;
   proxy_pass http://aaa.com;
  }
  
  location ^~/b-api/ {

   rewrite ^/b-api/(.*)$ /$1 break;
   proxy_pass http://bbb.com;
  }
  
  location / {
   root $rooturi;
   try_files $uri $uri/ /index.html =404;
   add_header Cache-Control "no-cache";
   add_header Access-Control-Allow-Origin *;
  }

 
}