Serve and test local HTML using Browsersync

Serving content locally is easy using Browsersync. I discovered the code as I was using a Yeoman generator “generator-react-gulp-browserify” to create a web app. The Gulp workflow contained in the Yeoman generator for watching changes fired up a local browser using Browsersync on port 3000.

The watch path of the Gulp workflow started up two servers

However in the terminal, Gulp logged some information about serving on a “UI server” on port 3001. “What is that?” I thought, and opened the localhost:3001 in a browser tab.

The Browsersync dashboard

The “UI” was Browsersync

That was a pleasent surprise for me. I just expected that the Gulp workflow would open a server to serve my webapp files, but discovering that a complete dashboard was started up and included made me smile.

To start with: Browsersync is new to me, so these observations are based on what I have just observed. This post is more of a “long-tweet” (as Twitter has not yet released their soon-to-land longer tweet).

A lot of configurations and features in the Browsersync dashboard

The “Sync Options” tab in Browsersync dashboard

Sync Options offers you configuration of how devices visiting the served web app should be synced. For instance you can have the entered content in input elements be synced across all visiting clients. For testing purpose this is great. I visited the External URL of the web app from my iPad, and voila, I had a synced view of the web app on the iPad. Entering content in a INPUT field on the web app was automatically synced across the two visiting browsers! Cool.

Previously I have used Adobe Inspect which required an app to be installed on my iOS devices before it would work — with Browsersync installed I can do cross device testing without any other required software.

As a note aside I can reveal that this sync feature seemed to add some issues to the default react app which was rolled out as I used the Yeoman generator :-)

Plugins — Browsersync even allows users to extend it. I saw 7 plugins when I visited the proposed link to find plugins to Browsersync — cool, I will have to look into that!

Network Throttling is also a thing you get.

Want to emulate bad network connections at client side? No problem!

Even if you can also do that in the browser (if you have the developer toolbar) you can emulate bad network connections as you serve the web app. That is very handy and cool! For instance on my iPad I have no access to a developer toolbar, so doing network throttling server side is cool.