Hot reloading

We have achieved some pretty big wins for our development process. There’s one more convenience I want to add before we move deeper into Webpack configuration.

Imagine an application that consists of a form that pops up in a modal when a user clicks on an Edit button. When you reload the page, that modal is closed. Now, imagine that you’re the developer trying to fine-tune that form. Your Dev server is reloading the page after every tweak, forcing you to reopen the modal. This is mildly annoying in this case, but think about something like a browser game, where getting back to where you were requires several clicks.

In short, we need a way to reload our JavaScript while still preserving the current state of the application, without reloading the page itself; this is called hot reloading. We use Webpack to swap out the bits of our UI that have changed, without reloading everything.

In order to do so, we will use Dan Abramov’s react-hot-loader package. Let’s install it and see how we will configure Webpack to play nicely with it.

To install, type yarn add react-hot-loader@3.0.0. At the time of writing, version 3 is still in beta; if yarn prompts you to select a beta version of 3.0, pick the latest (for me, I chose beta.7):

yarn add react-hot-loader@3.0.0

To get it working, we need to do four things:

1. Turn on Webpack’s own hot module replacement plugin.
2. Use React Hot Loader as an entry point to our app so that Webpack looks to it for source files.
3. Connect React Hot Loader to Babel.
4. Turn on hot reloading with our Dev Server.

Installing Webpack’s HMR plugin is actually quite easy. In our webpack.config.js, first require Webpack at the top of the file so that we can access the package:

var webpack = require('webpack');

Then, above our devServer key, add a new key called plugins, with an array as the value, which includes new webpack.HotModuleReplacementPlugin() as the only item:

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015','react'],
        plugins: ['transform-class-properties']
      }
    },
  ]
},
plugins: [
  new webpack.HotModuleReplacementPlugin()
],
devServer: {
  contentBase: "./public",
  historyApiFallback: true,
  inline: true,
}

Restart your server to check for errors, and then move on to step 2.

Right now, our index.js is our entry point for Webpack; it executes the code in that file and derives from the bundle of the files used in that execution. We want to execute the react-hot-loader package first. Let’s modify our entry key to be like this:

entry: [
  'react-hot-loader/patch',
  __dirname + "/src/index.js"
 ],

To make it work with our Dev server, we need to add a bit more code:

entry: [
   'react-hot-loader/patch',
   'webpack-dev-server/client?http://localhost:8080',
   'webpack/hot/only-dev-server',
   __dirname + "/src/index.js"
 ],

This configuration means that Webpack will execute the code in these paths before moving on to our code.

Again, try restarting your server. If there is an error, check for typos; otherwise, onward!

Next, we want to add a Babel plugin so that our hot reloaded files are compiled with babel-loader. Just update our Babel configuration, as shown, using the Babel plugin included in react-hot-loader:

loaders: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      presets: ['es2015','react'],
      plugins: ['react-hot-loader/babel', 'transform-class-properties']
    }
  },
]

We also need to turn on hot reloading with our Dev Server; do so by adding a hot: true to our devServer config:

devServer: {
  contentBase: "./public",
  historyApiFallback: true,
  inline: true,
  hot: true
},

As the last step, we need to add a bit of code to our index.js. Add the following to the bottom of the file:

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(
     <App/>,
     document.getElementById('root')
    );
  });
}

The preceding code basically sends a new version of our app to ReactDOM.render when the files change.

Okay, let’s give it a shot. Restart your server, and then open up localhost:8080. Try editing the text Hello from React!, and watch as the HTML updates without the page ever reloading; neat.

Hot Module Replacement will make our lives much easier, especially once we start building our app with different states--states that reloading the page will reset.