A practical guide to enabling Hot Reloading in your React app in a single commit

Today we’ll add Hot Reloading a real-world React App. The project we’ll work within is becoming more full-featured, and HMR enables us to iterate much, much faster.

The mess of existing documentation on enabling HMR in webpack isn’t clear and is often scant of real-world examples, so here’s the actual code you’ll need to employ and deploy. (or skip to the whole commit itself on github)

Update our app configuration

Our app’s current state required a Server process (which handled serving files from static/, pre-rendering the client HTML, and serving our API middleware), and a Client/webpack process (which simply compiled client.js to the static/ folder and watched for changes).

Since adding webpack-dev-middleware to the Server process will handle compilation of client.js as well as hot reloading capabilities, we’ll no longer need the Client process. Hence, we’ll now only need to run a single node in development, and on production simply run webpack && node (compile, then serve):

Add the webpack dev middleware

Now we’ll insert the webpack middleware before our serve-static or server middlewares, which will serve compiled client assets. But first, prerequisites:

$ npm install --save-dev webpack-dev-middleware webpack-hot-middleware

On production, the relevant compiled client.js files should be in the static/ directory.

Add HMR transforms to our Babel configuration

We’ll use babel-plugin-react-transform and react-transform-hmr to automatically add hot reloading support to any React components:

npm install --save-dev babel-plugin-react-transform react-transform-hmr

If you’re only using React on the client side, and not doing any server rendering, you can put the below config straight in .babelrc . That’s not the case for this app — we need a “non-hot” babel config for server rendering, and a “hot-added” babel config for the client rendering (compiled for the browser with webpack)— so we’ll add it to the babel-loader for use during webpack compilation only.

…and the HMR client to our client bundle

Additionally, we’ll add webpack-hot-middleware/client to our build, add the HotModuleReplacement and NoErrors plugins, and enable the HMR-required option recordsPath (as detailed in the webpack-hot-middleware docs)

.babelrc config was taken from this guide, and the query param implementation for webpack.config from this stackoverflow question. To avoid JSON.stringify(), you could use webpack-combine-loaders.

If you’re using Redux, you should also enable hot reloading of your reducers: