gatsby + browsersync?

Gatsby, a static site generator that allows apps to be progressive web apps out of the box, is a fascinating way to build React websites and applications in a moderately opinionated way. It’s fun to see the parallels between using Gatsby and using the build system I’m more familiar with including NPM plugins like Gulp and Browsersync. I’ve even open sourced a starter project that I forked which includes both, because I love the real-time feedback that Browsersync provides on both my local machine as well as devices I use to browse my machine’s IP address. If you don’t know Browsersync, it’s probably a game changer for you if you need to do device testing on your website or web application.

Well, the time finally came in the last few weeks where I was missing out on using Browsersync with a Gatsby project I’m working on. Maybe I could just install the package and wire it up? Too much work, I thought. So I went searching to see what I could find, and guess what?

There’s already a solution! Gatsby updated with one simple change that allows a Browsersync-like feature. How has this not been reported more already?!

Using the command below, Gatsby’s app can be viewed at http://localhost:8000.

gatsby develop

But if you add a simple flag and localhost address, you get the main feature that Browsersync provides, Gatsby website viewable using the local IP so other devices can easily connect on the browser!

gatsby develop -H 0.0.0.0

And what does this add?

gatsby command output for browsersync-like feature

Grab your smartphone, open up your browser, and type in the IP address displayed on the On Your Network line, shown in the above screenshot. Let that Gatsby site resolve in your browser and your laptop and smartphone browsers will be in sync!

Game changer!