12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
11 : 17 : 24 : 34
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
Become a member
to unlock all features

    Configure hot module reloading to work with react-universal-component

    Tim KindbergTim Kindberg

    We will add configurations to our project to enable hot module reloading, so that our changes will update in the browser without a hard window refresh. We’ll need to add two packages to our project:

    • react-hot-loader
    • webpack-hot-middleware


    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: We need to install a couple of specific modules for hot loading. Those are react-hot-loader and webpack-hot-middleware. Once those are installed, we can make changes to our codebase.

    On this server, I need to go ahead and import the webpack-hot-middleware. I'm going to add the middleware to be used right after webpack-dev-middleware and before hot-server-middleware. It'll take in one parameter, and that's going to be the client compiler.

    Next, we're going to jump over to the webpack-config on the client, so we need to add some things to our entry. The first one is going to be the webpack-hot-middleware/client, and we also want react-hot-loader/patch. We go down to our plugins, and we need to enable the HotModuleReplacementPlugin as well as set up the DefinePlugin.

    We want to set the NODE_ENV variable to development, and this will turn various various development features on in webpack and hot module reloading. Take a peek at the server config now. We just need to add a couple of plugins.

    We want to turn on an optimization called the LimitChunkCountPlugin. We're going to set maxChunks to one. This is going to enable the server-side code to run synchronously, because there's only going to be one chunk.

    Next, we actually just want to copy the DefinePlugin over on the server as well. We've got a change to make in our babelrc. We're going to use a feature in the babelrc called env, and it lets you set overrides for various environments.

    For our development environment, we want to override some plugins. We'd like to enable the react-hot-loader babel-plugin.

    Now, let's set up our actual client code. We want to import AppContainer from react-hot-loader lib AppContainer. Then, we want to wrap our app in the AppContainer. Any child of AppContainer is going to reload when a change occurs.

    Lastly, we want to look at the Node environment, and if we're in development, and if hot-module-reloading exists, then we want to accept any hot module changes to our components/appjs file, so anytime that file changes, or anything that that file imports, then, we want to go ahead and grab a fresh copy of App, don't grab the default, and we want to render that new app. If I did everything correctly, then we should see hot-module-reloading working.

    Open up our app. We'll change "Home" to "Bass" safe, and there you see I went to base live without refreshing. Same with if we change any other styles and save those, we see the styles update as well.

    This way I can change tabs, I can change...This is state. We're keeping the state. We should be able to change this without resetting back to home. If I change "Bar" to "Hello," I see a change in there as well.