Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    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
    reactReact
    ^16.0.0
    Code

    Code

    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
    Transcript

    Transcript

    Instructor: 00:00 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.

    00:16 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.

    00:42 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.

    01:25 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.

    01:49 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.

    02:10 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.

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

    02:45 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.

    03:10 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.

    04:13 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.

    04:31 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.

    Discuss

    Discuss