Reloading the World

Reloading Express

So far, when making changes to our config and server files, we've been restarting the server with npm run dev Let's get it restarting automatically with nodemon.

To begin, you may start from where we left off, or clone the git repo and checkout the right branch like so.

git clone git@github.com:lawwantsin/webpack-course.git
cd webpack-course
git checkout reload

First things first, let's install nodemon so we can play around with it.

npm install -g nodemon

In package.json under scripts change the dev line to the following.

"dev": "nodemon --watch config --watch src/server src/server/main.js"

Nodemon monitors files for changes and reruns main.js whenever anything in src/server is saved. And when you run npm run dev You see new output.

Editing (or just saving) any file, will result in a full reload and recompile of webpack. It happens pretty fast, so, shouldn't worry.

Nodemon instantly restarting the server and Webpack hot-updates the front-end code can't be beat. Or can it?

If we edit our index.html we find that it's no longer being updated in the browser automatically. That's lame. We just had that with the plain devServer before we started rolling our own and getting into all this hot biz. What gives?

Well, html isn't javascript, so it's not injectable as a module. The browser should reload automatically but it doesn't and needs to be told.

Most how-tos skip this part, instead opting to move on to a React centered view of html. That's fine and we'll get there but it's pretty easy, once you read a billion github issue threads and try every possible combination of config. I'll give you the shortcut.

First, we need to move the html from loaders to the html webpack plugin.

So let's install that first:

npm install html-webpack-plugin

Add this to the top of webpack.dev.js:

const HTMLWebpackPlugin = require("html-webpack-plugin")

Then change your html loader to remove the extract and file loaders from compilation.

 test: /\.html$/,
   use: [
     {
       loader: "html-loader"
     }
   ]

Then add this to the plugins array at the bottom. This will do the work of the extract and file loaders.

new HTMLWebpackPlugin({
  template: "./src/index.html"
})

In src/main.js add reload=true to the end of the client files.

require("webpack-hot-middleware/client?reload=true")

HTMLWebpackPlugin automatically injects script and link tags into the index.html. We can turn it off with inject: false but, let's remove our hard-coded script tag from the index.html first. That way we won't double load the script file.

If we rerun npm run dev we see that it starts as normal, css reloading works as normal, and when we edit the html's h1 to say something else, the browser does a complete refresh.

In Sum

So now we're where we were using the dev server from the command line. We've got assets that we can manipulate via HMR and an html file that updates as we change it. We can even update our webpack config and nodemon will reload everything, so we're back to reactive programming, with a better stack for the future of our app.

git checkout reload-final

Next Up

In the next article we're going to take a better way to debug both client and server code with the Chrome DevTools.