Implementation example of react project from new creation to deployment

Start a new project

This article mainly records the process of working on a new project from 0 to 1, mainly recording three nodes: selection, runtime, and launch.

Project Selection

React scaffolding initialization, the more popular ones in the community are cra (create-react-app) and umi. After comparing the following points, we finally chose umi which is more suitable for the project.

1. Ease of use, out of the box. Umi has many built-in functions, but it also brings many limitations. For example, the requirements for project structure and the plug-ins for its own ecosystem require learning costs. Cra initialization simply selects a template to start, and no additional learning costs are required (even if Vue players come over, there is no burden).
2. Scalability, modify webpack configuration. cra provides eject (irreversible operation) that is completely exposed and controlled by yourself, which loses the original intention of wanting simple configuration at the beginning. You can also use react-app-rewired and customize-cra as shown here. When umi needs to modify the webpack configuration, it can write files directly (based on webpack-chain), and also provides a running configuration.
3. Ecosystem, umi is open source from Alibaba, and there are many plug-ins in it that are related to their open source, such as the popular antd and qiankun. The official website provides a lot of practical guidance, and it is in Chinese documents (some people prefer this). CRA is concise and is only responsible for a scaffolding job (it is 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 requires the support of many mature plug-ins, umi was adopted. antd is so good! ! ! @umijs/plugin-model, I recommend this plugin. If you understand the internal practices, you will basically master data management.

Runtime

Umi provides app.ts, a runtime configuration file, which can expand the capabilities of the runtime. In simple terms, all the pre-operations for rendering your page can be placed here. This concept can be classified into

Compared with storybook (preview.js), if you want to implement it yourself, you can insert the script in the corresponding HTML. There will be some project-related content involved here. Because the project needs to be embedded in an existing project, we adopt the iframe approach. Inevitably, we need communication and iframe size adaptation.

For iframe communication, because the domains are different, window.postmessage is used. In order to maintain data readability, it is recommended to define the corresponding event transmission content to avoid increased difficulty in later maintenance. If frequent communication is required, it is recommended to adopt a micro-frontend solution.

Iframe adaptation, the iframe-resizer plug-in helps us solve it. Remember that both the embedding and the embedded need to be installed, otherwise they will not be able to communicate and adapt. There is a problem here. When the page is embedded, the body node cannot be expanded from the inside, so it is necessary to use the custom calculation method provided by iframe-resizer to provide the corresponding method in the child page. The code is as follows:

Subsystem

import 'iframe-resizer/js/iframeResizer.contentWindow.js';
// If embedded, open the listener 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 parameters}
   }
  };
  parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
 }
};

iframeInit();

Go Live

After a round of packaging, it is finally launched. Here we mainly talk about how to configure nginx to forward requests.

During development, if interfaces to multiple different domains are needed, the first reaction of the front end is to configure a proxy. I was a bit 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 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 *;
  }

 
}

This is the end of this article about the implementation example of react project from creation to deployment. For more relevant react project from creation to deployment, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!