Setting up react-hot-loader

Coming from using Browserify in my build tasks and seeing some of the really cool stuff at the React.js conference, I got interested in checking out react-hot-loader. react-hot-loader is a plugin for webpack that allows instantaneous live refresh without losing state while editing React components.

Because this was the first time I was using webpack, I found it a bit confusing to get react-hot-loader working. Finally, with the help of gaearon/react-hot-loader, I got it working. Here are the steps that I had to take in order to go from a pretty bare webpack config to including react-hot-loader.

Please note that this guide assumes that you have webpack installed, and building/working.

Installation

The only extra package that you need to install is react-hot-loader. Do that by running

$ npm install --save-dev react-hot-loader

Server

With the plugin installed, it is now time to configure a small server for webpack to use. The key aspect of this configuration is that when creating a new WebpackDevServer, hot: true is specified as an option. For my project, specifically, I had to add an entirely new file called server.js and simply included the server provided in the boilerplate.

Config

Next, the package.json should be edited appropriately to correctly call the webpack server on start up (or any command that you prefer). In my case, I wanted to to use npm start to start the dev server and enable the hot loading. Hence, I changed start inside of scripts to "node server.js".

The last thing that has to be done is configuring webpack itself. In your webpack.config.js, configure the entry to include the dev server and the hot loading server. In my case, this looked like

entry: {
    app: ['webpack-dev-server/client?http://0.0.0.0:8080',
    	  'webpack/hot/only-dev-server',
          './js/app.js'
    ]
},

Next the loader needs to be adjusted for react-hot. Find the loader for js, and add react-hot to the loaders. Because I only had one loader before react-hot-loader, I actually had to change loader to loaders before it would take an array in as input. In the end, my loaders looks like

loaders: ['react-hot','jsx-loader?harmony'],

Lastly, the plugin from webpack has to be included in the plugins section of the config. I had not been using any webpack plugins before, so I actually had to var webpack = require('webpack'); at the top of my config. Then just add new webpack.HotModuleReplacementPlugin() to the plugins section. Mine ended up looking like

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
]

webpack.NoErrorsPlugin() is an optional plugin that tells the reloader to not reload if there is an error. The error is simply printed in the console, and the page does not reload. If you do not have this plugin enabled and you have an error, a red screen of death is thrown.

Usage

To use, simply start the server we configured earlier via npm start and open your url in browser. You should see webpack notify that it is using the hot loader. To test simply, just edit any component and watch the changes happen live!

Written by Joseph Furlott who lives and works in Brooklyn, New York. I am a software engineer that specializes in designing and building web applications using React. I work at Datadog as a software engineer.