• preface
  • Hot reload analysis
    • React Static resource hot loading analysis
    • Configure the React server
  • To be solved
  • conclusion

preface

The React client-rendered front-end interface and webpack-dev-server make it easy to implement local refreshes during front-end development. However, it is not easy to realize local refresh with the React-Isomorphic of Node server and update the code of client and server at the same time. A feasible implementation scheme is described as follows:

For KOA2, react-hot-loader3, and react-router, optional.

Demo code address: github.com/lanjingling…

Hot reload analysis

React Static resource hot loading analysis

React Hot loading configuration of static resources is not complicated. Webpack-dev-server is responsible for recompiling the code and react-hot-loader is responsible for hot loading.

Note: Webpack-dev-server can also be implemented as an Express server with Webpack-dev-middleware and Webpack-hot-middleware middleware

  1. configurationwebpack.client-dev.js:
plugins: [ new webpack.HotModuleReplacementPlugin() ] // ... entry: [' react - hot - loader/patch ', 'webpack - dev - server/client? http://127.0.0.1:8080', 'webpack/hot/only - dev - server', './ SRC /client/home', // entry path]Copy the code

  1. Modify thebabelThe configuration file
"plugins": [
    "react-hot-loader/babel"
]
Copy the code

  1. Modify import file
import React from 'react'; import ReactDOM from 'react-dom'; // Shared component page import Home from '.. /shared/page/Home'; Import ReactHotLoader from '.. /shared/component/ReactHotLoader'; const container = document.getElementById('react-container'); function renderApp(TheApp) { ReactDOM.render( , container ); } renderApp(Home); If (__DEV__ && module.hot) {// Accept the modification of this file to hot load module.hot.accept('./home.js'); // Applying any changes will cause hot loading, re-rendering. module.hot.accept( '.. /shared/page/Home', () => renderApp(require('.. /shared/page/Home').default) ); }Copy the code

Configure the React server

In development mode, server configuration is complex. Consider the following:

  • Listen for server code changes.
  • The server code needs to be recompiled
  • Restart the server server and ensure that require the latest server code
  • Ensure that server ports are enabled on demand and do not conflict
  1. Listening for server code
// Monitor server file changes, CompileHotServer const watcher = chokidar.watch([path.resolve(__dirname, '../ SRC '), path.resolve(__dirname), compileHotServer const watcher = chokidar.watch([path.resolve(__dirname, '../ SRC ')), ], {ignored: path.resolve(__dirname, '.. /src/client')}); watcher.on('ready', () => { watcher .on('add', compileHotServer) .on('addDir', compileHotServer) .on('change', compileHotServer) .on('unlink', compileHotServer) .on('unlinkDir', compileHotServer); });Copy the code

  1. Close all connections to the client, close the server server, and recompile the server code
Compiling ++; // Close all connections, close the server, and reload function compileHotServer() {compiling ++; If (listenerManager) {ListenerManager.dispose (true).then(runCompiler); // listenerManager instance contains the socket collection of the current Web server object and client connection. } else { runCompiler(); Function runCompiler() {compiler.run(() => undefined); }Copy the code

  1. Restart the server server
Compiling ('done', stats => {compiling --; if (compiling ! == 0) return; if (stats.hasErrors()) { console.log(stats.toString()); return; } console.log('🚀 😝 Build server bundle done.'); Object. Keys (require.cache). ForEach ((modulePath) => {if (modulePath.indexOf(compiler.options.output.path) ! == -1) { delete require.cache[modulePath]; }}); try { const listener = require(compiledOutputPath).default; listenerManager = new ListenerManager(listener, 'server'); } catch (err) { console.log(err); }});Copy the code

To be solved

[react-router] You cannot change; [react-router] You cannot change; It will be ignored, but does not affect the refresh

conclusion

Through the above configuration, you can achieve the code modification, server and client code update and hot reload. In the process of code development, two ports need to be opened, which are respectively used to provide the compilation of static resources on the client side and the server on the background.

If you have a more perfect solution for the React Isomoriode ode server rendering hot loading in development mode, you are welcome to contribute 😁