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 with browser testing by synchronizing the file changes and interactions of the web page across multiple browsers and devices. It provides features such as auto-reloads 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 reloads on the client-side, you need to run npm start, which will start the development server and open up a browser pointing to http://localhost:9000. Note port 9000 in the URL. BrowserSync will be using this port, while the application backend will be served at 8080, and all requests will be proxied through 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 that your actions are replicated, thanks to BrowserSync. Try changing some code and save the file to see the live reload in action. Note that you need to be authenticated in both of the browsers, and if you perform a POST request, it will be done twice as there are two browsers performing the action.

Table of Contents for Webpack dev server and&#xA0;BrowserSync

Create new playlist

Sign In

Sign Up

Table of Contents for
Webpack dev server and BrowserSync