Adding BrowserSync to Hapi and Webpack

Previously, I wrote about serving a sample React and Flux todo app with Hapi and Webpack. Yesterday, thanks to the social nature of GitHub and the programming prowess of Kevin Old, I ran across BrowserSync. After finding the right configuration option, I was blown away and needed to share how simple it is to add auto-refreshing across multiple devices and browsers to my existing development workflow:

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
...
plugins: [
  new BrowserSyncPlugin({
    proxy: 'localhost:8000'
  })
]

It was that simple.

Saving Clicks and Refreshes

Assuming I have the same Hapi and Webpack setup as my previous post, I’ll run the following npm install command to add the browser-sync-webpack-plugin module:

npm install --save-dev browser-sync-webpack-plugin

Next, I’ll edit my webpack.config.js file to include the plugin:

In the first line, I simply required the plugin. At the end, I added the BrowserSyncPlugin to the plugins Webpack option. This included the proxy option which tells BrowserSync to act as a proxy to my regular localhost:8000 port and inject an async script just inside the body tag proxying all requests to a new port at http://localhost:3000 (default).

Once I edit the Webpack configuration, I’m done. Seriously. Now I can run start my development like I setup previously, and BrowserSync takes care of the rest:

npm run dev

When the app starts, BrowserSync tells me I automatically have local and external URLs available and opens my default browser to the local URL. I’ll open up a couple more browsers to the local URL; and since I’m connected to my home WiFi, I’ll open up my mobile phone’s browser to the external URL. With BrowserSync in place, adding new todo items on one browser instantly reflects on all the other browsers as well. In addition, if I edit one of my React or Flux assets, all of the browsers automatically refresh after Webpack completes the new bundle. Plus, if I edit one of my server assets, nodemon still restarts the server in the background which makes any new routes available while still keeping all open browsers connected via BrowserSync.

Want to force all browsers to refresh? BrowserSync also provides an administrative UI URL on port 3001 on both internal and external URLs. With this admin page, I can control many of the synchronized options including “Reload All” which will force all browsers to refresh.

Finding Bugs

By adding BrowserSync to my workflow, I instantly noticed a couple bugs with my app (which was a good thing). First, I was inadvertently making my Bootstrap table scrollable with a table-responsive class. Removing that wrapper div altogether fixed that issue.

I also noticed that while my adding tasks with my Random button worked across browsers, manually adding tasks did not. However, the Random button appears to initiate separate API calls for each browser. If I added a centralized server database with each browser receiving pushed updates for Todo items through WebSockets, it would most likely resolve this issue (although at that point, if I had three browsers open, I should expect to see three new entries show up if I push the Random button on one). Regardless, BrowserSync is a welcome addition to my development workflow.

The full code for this example is on GitHub.