This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

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 <16.4.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