Now, create a folder called “server” with two files in it; index.js and server.js.The index.js file will server as our mounting point and server.js will be our actual application. Our project structure should look like this;

In our index file Webpack is polling for changes to our server.js file. On changes to the file we reattach the the listener from Express to our import. Thanks to Webpack 2 we don’t need to re-require our server.js file, but it’s important that we accept the same file that’s being imported for Hot Module Replacement.

Open your browser and go to http://localhost:3000/api. You should see a message saying “I am a server route and I can also be hot reloaded!”. Then try to change that message in the server file and refresh the page. The message should now have changed. Notice in your terminal that the server itself doesn’t restart but Webpack updates the modules through HMR. We’re now hot reloading your Express application thanks to Webpack!

In the next part we will add server-side rendered React with HMR on both the server and the client.

Part II: React with HMR on the server and client

On the server

Let’s start by adding React to our dependencies;

yarn add react react-dom babel-preset-react

Then add the react preset to .babelrc;

{ "presets": [["env", {"modules": false}], "react"]}

Next, let’s create a folder to hold our components, let’s call it “common”.Create a file called App.js inside. Your folder structure should now look like this;

and go to http://localhost:3000/ and you will see our server rendered React component. Try editing the component in /common/App.js and refresh the page and it should update. We now have server rendered React with Hot Module Replacement in addition to HMR on our regular server routes.