Webpack dev server and BrowserSync

Webpack dev server (https://github.com/webpack/webpack-dev-server) provides a simple Express server using webpack dev middleware, and supports live reloads when assets change. Webpack dev middleware supports features such as hot module replacement and in memory file access.

In Webpack Version 4 and above a new alternative called webpack-serve (https://github.com/webpack-contrib/webpack-serve) is used instead of Webpack dev server. It uses native WebSocket support in newer browsers.

BrowserSync (https://browsersync.io/) is a Node.js tool that helps in browser testing by synchronizing file changes and interactions of the web page across multiple browsers and devices. It provides features such as auto-reload on file changes, synchronized UI interactions, scrolling, and so on. JHipster integrates BrowserSync with Webpack dev server to provide a productive development setup. It makes testing a web page on different browsers and devices super easy. Changes to CSS are loaded without a browser refresh.

To use live reload on the client side you need to run yarn start, which will start the development server and open up a browser pointing to http://localhost:9000. Notice the port 9000. BrowserSync will be using this port, while the application backend will be served at 8080, which all requests will be proxied through via webpack dev middleware.

Open another browser, for example, Firefox if BrowserSync has opened Chrome already or vice versa. Now place them side by side and play around with the application. You will see your actions are replicated, thanks to BrowserSync. Try changing some code and save the file to see live reload in action.