blog

Photo of Raven by Kasturi Roy on Unsplash

Accelerated, Lower Frustration Web Development with BrowserSync

by

With apologies to Mr. Poe:

I was fuming in frustration, sitting clicking at my station,
I’ll spare you some narration, but I was getting pretty sore.
‘Surely there must be some method, whereby changes are detected,
And perhaps then be injected into my page’s DOM!’, I swore.
‘Some way to edit CSS without it being such a chore,
And click Refresh nevermore.’
So I then took up the challenge, and began a quest for knowledge
on this strange mysterious thing for which I’d searched some times before.
But amidst auto-refresh plugins, and bookmarklets by the dozen,
Nothing did I find which would my page’s state restore.
Then I chanced upon a newsfeed and this here did it implore:
“BrowserSync, you will adore.”

— not quite Edgar Allen Poe

BrowserSync is a nifty development tool for editing and/or testing websites. It’s written in JavaScript, on top of node.js, so you install it using npm (perhaps inside a nodeenv ). After installing it, you start it up something like this:

$ browser-sync --server --files "*.html, css*.css"

which will start up a node.js web server serving your static files. The server will also monitor your files for changes.

But here’s the cool part.

When BrowserSync serves an html page, it injects a bit of Javascript into the page, which opens a websocket connection to the server. And then when any of the files being watched change, it notifies the page of the change.

But here’s the really cool part.

As might be expected, if an html page changes, the page in the browser gets notified, and triggers the browser to refresh the page. But the really amazing (to me) part is that if a CSS file (or an image, apparently…I didn’t test images) gets modified, the CSS for the page gets updated in place, without changing the DOM state of the page. As in, no page refresh. Anyone who has ever spent long hours tweaking the design of a highly dynamic website or web application is probably jumping up from their chair yelling something like "MUST! HAVE! NOW!".

At least that’s what I did. But I’m kind of excitable sometimes. Anyway…

Not Just For Static Files

Some of you may be concerned that you won’t be able to leverage this awesomeness because your code is dynamically generated by a backend app, be it PHP, Python, Java, Ruby, Node, or whatever.

Not to worry, BrowserSync can handle this. In addition to "server mode", it also has a proxy mode, which sits in front of an existing server and injects the same websocket client into any pages it serves. If you point it to your source files, it can trigger page refreshes on changes to your PHP, Python, etc.

Not Just For Development, Either

In addition to near-real-time CSS editing, and auto-refreshing web pages, BrowserSync has one more trick. You can tell the injected websocket client to report certain user activity in the browser, like scrolling, clicking links, and filling out form fields. And then the BrowserSync server will mirror those events into any other browser connected to it.

So you can test your site on multiple browsers simultaneously.

Mind. Blown. BrowserSync wins.

Do yourself a favor and check it out.

+ more