Skip to main content

Development

How to Hot Reload Your Web Application

Have you ever tried to use webpack to compile JS and CSS files? If yes, you might know that it’s difficult for the developer because they usually need to run the “Webpack” command to recompile JS files and CSS files when they are changed. Every time webpack does a compilation, the developer should click F5 to refresh the page.

“webpack-dev-middleware” and “webpack-hot-middleware” provide you a great way to hot reload your web without manually refreshing.  

What is webpack dev middleware?

It’s a simple wrapper middleware for webpack. It serves the files emitted from webpack over a connect server.

It has a few advantages over bundling it as files:

  • No files are written to disk. It handles the files in memory
  • If files changed in watch mode, the middleware no longer serves the old bundle, but delays requests until the compiling has finished. You don’t have to wait before refreshing the page after a file modification.

What is webpack hot middleware?

Webpack is hot reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server.

This post will briefly introduce how you can set up a dev environment with these two middlewares.

1.First of all, let’s create an express project by using express CLI. Before you do this, you will need to install express-generator, then run the below commands.

How to Hot Reload Your Web Application

2.Install webpack, webpack-hot-middleware and webpack-dev-middleware.

How to Hot Reload Your Web Application

3.Now, we have an express server. Let’s add a button to the index page, then bind a simple click function to the button, then add a stylesheet.

How to Hot Reload Your Web Application

How to Hot Reload Your Web Application

4.Add CSS-loader and style-loader.

How to Hot Reload Your Web Application

5.Update the webpack.config.js file and entry.js.

How to Hot Reload Your Web Application

6.Add the below code to your js file.

How to Hot Reload Your Web Application

7.Now, you can start your server via command “node .bin/www”, then go to http://localhost:3000 (port is default to 3000, you can change it) and click the button. You will see the alert dialog. If you modify the alert string in the js file, it will instantly take effect after your change. Also, you can update your CSS file which will also be hot reloaded if you make changes.

You’ll see this in your browser console:

How to Hot Reload Your Web Application

8.Now everything should be working as we anticipated in our dev environment. Now, how can we hook this into the production environment?

It’s simple. Let’s have a conditional statement check your environment variable. If you’re in a dev environment, then use the webpack-dev-middleware and webpack-hot-middleware.

How to Hot Reload Your Web Application

As this point, everything is working for both dev and production environment. It becomes quite convenient for us to develop web applications in this way. Hope you enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram