Construction process of egg react SSR server rendering webpack

Time:2020-11-27

1. Launch of local egg project

Construction process of egg react SSR server rendering webpack

  • First of allnode index.jsperhapsnpm run devStart egg app
  • Start the koa service in the egg agent, and start the webpack compilation service in the koa service
  • Mount the webpack memory file reading method to override the local file reading logic
app.react.render = (name, locals, options) => {
   const filePath = path.isAbsolute(name) ? name : path.join(app.config.view.root[0], name);
   const promise = app.webpack.fileSystem.readWebpackMemoryFile(filePath, name);
   return co(function* () {
     const code = yield promise;
     if (!code) {
       throw new Error(`read webpack memory file[${filePath}] content is empty, please check if the file exists`);
     }
     // dynamic execute javascript
     const wrapper = NativeModule.wrap(code);
     vm.runInThisContext(wrapper)(exports, require, module, __filename, __dirname);
     const reactClass = module.exports;
     if (options && options.markup) {
       return Promise.resolve(app.react.renderToStaticMarkup(reactClass, locals));
     }
     return Promise.resolve(app.react.renderToString(reactClass, locals));
   });
};
  • The worker monitors the compilation status of webpack to check whether the compilation of webpack is completed. If not, webpack compiling loading will be displayed. If the compilation is completed, the browser will be opened automatically
  • After the webpack is compiled, the agent sends a message to the worker. When the worker detects that the compilation is complete, the browser is opened automatically, and the egg service is officially available

2. Local server rendering page access

  • npm run dev

Construction process of egg react SSR server rendering webpack

  • The browser enters the URL request address, and egg receives the request, and then enters the controller
  • After the node layer gets the data (node calls the Java back-end API data interface through HTTP / RPC), it enters the template render process
  • After entering the render process, through the worker process, call theapp.messenger.sendToAgentSend the file name to the agent process, and at the same time through theapp.messenger.onStart the monitoring agent to send the message
  • After the agent process gets the file name, it gets the file content from the webpack compilation memory, and then the agent passes theagent.messenger.sendToAppSend the contents of the file to the worker process
  • After the worker process obtains the content, it compiles HTML by react, and then enters the JSS / CSS resource dependency process
  • If you start the proxy mode (see setproxy of easywebpack), html is directly injected into JS / CSS of relative path, as follows:

The page can be used directly/public/client/js/vendor.jsRelative path/public/client/js/vendor.jsThe back-end framework proxy forwards it to the webpack compilation service, and then returns the content to the back-end framework. Here, two application communications are involved

<link rel="stylesheet" href="/public/client/css/home/android/home.css">
<script type="text/javascript"></script>
<script type="text/javascript"></script>
  • In case of non proxy mode (see setproxy of easywebpack), direct HTML injection must be JS / CSS with absolute path, as follows:

Page must usehttp://127.0.0.1:9000/public/client/js/vendor.jsAbsolute path

<link rel="stylesheet" href="http://127.0.0.1:9000/public/client/css/home/android/home.css">
<script type="text/javascript"></script>
<script type="text/javascript"></script>

Among them http://127.0.0.1 : 9000 is the address of webpack compilation service started in the agent, which is different from the address of egg application

  • Finally, the template rendering is completed, and the server outputs HTML content to the browser

3. Construction process and operation mode of formal environment release mode

  • Webpack builds server files and client resource files to disk directly through local build or CI
  • Egg render reads the local file directly and then renders it to HTML
  • according tomanfifest.jsonFile injection JSS / CSS resource dependency injection
  • After the template rendering is completed, the server outputs HTML content to the browser

4. About agent and worker in egg framework

  • We use the local development to modify the node layer code to repair and restart, only the worker process will be restarted, and the agent process will not be restarted. We can start the webpack compiler service in the agent to solve the webpack compiler instance problem
  • Because eggapp process and agent process are two processes, when URL access, we send message to agent process through worker to obtain the file content rendered by server, and then agent sends message to worker to solve the problem of file reading
  • Local development webpack hot update memory storage read and online application native file read logic separation function, we through the local development mode, by reading the webpack memory content to cover the local file reading logic, so that the development mode and release mode can be seamlessly connected
  • Communication mechanism between worker and agent https://eggjs.org/zh-cn/core/cluster-and-ipc.html
  • To realize the function of automatic restart of egg project server code modification project, you can use the egg development plug-in

5. Project and plug-in

  • Egg react webpack boiler framework project based on easy web back react and egg view react (SSR) plug-ins
  • Easy web pack react webpack react builds engineering solutions
  • Easy web pack – cli webpack to build engineering scaffold
  • Egg view react SSR react SSR solution
  • Egg – webpack local open heat update use
  • Egg webpack react native development rendering memory reading assistant plug-in

Recommended Today

Summary of recent use of gin

Recently, a new project is developed by using gin. Some problems are encountered in the process. To sum up, as a note, I hope it can help you. Cross domain problems Middleware: func Cors() gin.HandlerFunc { return func(c *gin.Context) { //Here you can use * or the domain name you specify c.Header(“Access-Control-Allow-Origin”, “*”) //Allow header […]