Start new projects

This paper mainly records the recent work of a new project from 0-1 process, mainly records three nodes, selection, operation, online.

Project selection

React scaffolding initialization, crA (Create-React-App) and UMI are popular in the community. Umi that is more suitable for the project was selected by comparing the following points.

  1. Ease of use, out of the box. Umi built-in many functions, but also bring a lot of restrictions, such as the provisions of the project structure to provide their own ecological plug-ins need to learn the cost, CRA initialization simple selection template can start, no additional learning costs (even vUE players have no burden).
  2. Extensibility, modify the WebPack configuration. Cra provides eject control that is completely exposed, losing the original intent of simple configuration, or using react-app-rewired and customize-cra, as you can see here. When UMI needs to modify the Webpack configuration, it can directly write files (based on webpack-chain), and provides a running configuration.
  3. Ecology, UMI is ali open source, there are many plug-ins are associated with their open source, such as the popular ANTD, Qiankun, the official website provides a lot of practical guidance, and is a Chinese document (some people tend to this), CRA concise only responsible for the work of a scaffolding (easy to understand the internal implementation, Problems can be quickly located and solved.

Finally, UMI was adopted in consideration of the need for rapid construction of a project and the support of many molding plug-ins. Antd is so sweet!! @umijs/plugin-model, recommend this plugin to understand the internal practice of the basic master of data management.

The runtime

Umi provides app.ts, runtime configuration file, which can extend the capabilities of the runtime. Simple understanding is to render your page before the operation can be placed here. This concept is analogous to storybook(preview.js), which can be implemented by inserting scripts into the corresponding HTML. There will be some project association here, because projects need to be embedded in existing projects, so we take the iframe approach, inevitably we need to communicate, and iframe size adaptation.

  1. Iframe communication, because the domain is different, so take window.postMessage. In order to maintain the readability of data, it is recommended to define the corresponding event transmission content to avoid the difficulty of later maintenance. If frequent communication is required, it is recommended to adopt a micro front-end solution.

  2. Iframe adaptive, iframe-resizer plug-in helps us to solve this problem. Remember that both embedded and embedded need to be installed, otherwise it is impossible to adapt to communication. There is a problem here that the body node cannot be extended internally when the page is embedded, so we need to use the custom calculation method provided by Iframe-resizer to provide corresponding methods in the sub-page. The code is as follows:

Subsystem import 'iframe resizer/js/iframeResizer. ContentWindow. Js'; 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 parameters}}}; parent.postMessage({ msg: 'MessageFromIframePage' }, '*'); }}; iframeInit();Copy the code

online

After a round of packing, finally on line. Here is how nginx configures forward requests.

During development, when you need interfaces to multiple different domains, the first response of the front end is to configure the 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': '' },
    },
  },
Copy the code

The nginx configuration 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 *; }}Copy the code

This is the end of the article, thanks for reading, if there are mistakes hope to point out in the comments area. Happy New Year to you all! 🐷