Do I need Browsersync for this?

• code
• gatsby

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 results—e.g. VS Code LiveServer Extension, http-server node package, etc—Browsersync 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.

bashCopy
1npm install browser-sync --save-dev

jsonpackage.jsonCopy
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.

Copy
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 problem—I 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.jsonCopy
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...

Copy
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.