Blog

Gatsby Journey 03: Do I need Browsersync for this?

Browsersync has been an indispensable tool for many, providing an easy way to review changes in real-time both in browser and on mobile devices, and it's one of the first packages I'd install on any web projects. So, do I need to add this as a dev-dependency for Gatsby projects?

What is Browsersync

The official website describes it as "(a tool for) time-saving synchronised browser testing". At its barebone, Browsersync makes it incredibly easy to test web projects during development by mirroring the screen on devices and browsers and auto-refreshing them whenever a change occurs.

While there might be other ways to achieve the same resultse.g. VS Code LiveServer Extension, http-server node package, etcBrowsersync is arguably the most elegant and seamless solution available.

Typically I'd install it globally or locally per project basis as a dev-dependency, and include some additional npm scripts in package.json as something like below.

bash
1npm install browser-sync --save-dev
jsonpackage.json
1{
2 // ... other stuff
3 "scripts": {
4 "start": "npm run dev & npm run sync",
5 "sync": "browser-sync start --files 'scripts/**/*.js, styles/**/*.*' --proxy '127.0.0.1:9000' --port 9001",
6 "dev": "some-dev-command"
7 // ... other stuff
8 }
9 // ... other stuff
10}

Then I can simply run npm start to initiate my dev and sync command to see something like following.

1[Browsersync] Proxying: http://127.0.0.1:9000
2[Browsersync] Access URLs:
3 ---------------------------------------
4 Local: http://localhost:9001
5 External: http://10.255.251.208:9001
6 ---------------------------------------
7 UI: http://localhost:3001
8 UI External: http://localhost:3001
9 ---------------------------------------
10[Browsersync] Watching files...
11Starting DevelopmentServer

I can mirror/sync pages on any browsers on local computer at localhost and easily test it on my phone or tablet at its provided External address.

As soon as I started working on this Gatsby site, I found myself frequently (manually) refreshing the page and soon wanting to test on my phone. Obviously, it's a solved problemI could just install Browsersync and tweak the package.json file. But do I need to?

The Gatsby Way

Apparently, I'm not the first person to think about this. And there's already a solution, which I found through a blog post.

With no extra dependency installed, you can simply add -H 0.0.0.0 at the end of gatsby develop command. Now after updating scripts section of my package.json like the following...

jsonpackage.json
1{
2 // ... other stuff
3 "scripts": {
4 "build": "gatsby build",
5 "develop": "gatsby develop -H 0.0.0.0",
6 "start": "npm run develop"
7 // other stuff
8 }
9}

Running npm start will show me...

1You can now view b-as-in-bald-2020 in the browser.
2
3 Local: http://localhost:8000/
4 On Your Network: http://10.255.251.208:8000/
5
6View GraphiQL, an in-browser IDE, to explore your site's data and schema
7
8 Local: http://localhost:8000/___graphql
9 On Your Network: http://10.255.251.208:8000/___graphql

There you have it. Gatsby's way of doing Browsersync things. No additional dependencies, no lengthy additional commands, just built-in Gatsby option for easy real-time testing.