Gatsby: Testing Gatsby Site on Local Dev Environment

[kimfucious]

Summary

Hi there,

I've searched as best I could, but I could not find a simple way to enable a "stock" Gatsby install to support testing a site, running on a local server from another device on the same local network.

BrowserSync does a great job with this. With webpack dev server, I would normally, edit the webpack config, changing "local" host to an IP address.

I've checked for existing plugins as suggested, but to no avail. I could open up the hood to do this, but before I do, I thought I'd ask:

What's the best (i.e. generally agreed upon) way to enable a Gatsby site for local development testing from other devices (i.e. mobiles) on the same local network?

Thanks in advance for your suggestions!

Relevant information

Using gatsby-default-starter

Environment (if relevant)

• Gatsby version (npm list gatsby): 1.9.269
• gatsby-cli version (gatsby --version): 1.1.57

[ryanditjia]

I have a script that goes:

gatsby develop -o -H $HOSTNAME -p 3000

I’m on macOS and what this does is it runs Gatsby server on My-Mac.local:3000, this address is accessible from other devices within the same network.

[kimfucious]

Ha! That was too easy :smile:

I was so tunnel-focused on digging into webpack that I didn't even consider this simple, yet effective shell solution.

Thanks @ryanditjia !

[hsribei]

@ryanditjia I run that command, and the develop server does start listening at $HOSTNAME. But I can't access it in the browser even on the same machine, let alone on another device in the local network.

Did you have to do anything special for the hostname to be resolved in the local network, like setting up /etc/hosts on the router or something? Thanks!

[kimfucious]

@hsribei: try substituting your local ip address for the hostname.

[ryanditjia]

I don’t think I needed to do anything, it just works for me on 2 machines. Maybe something to do with Bonjour? Here’s the related Mac help page.

Change your computer’s local hostname

Your computer’s local hostname is displayed on your local network so others on the network can connect to your Mac. It also identifies your Mac to other Bonjour-compatible apps and services.

The local hostname is displayed beneath the computer’s name at the top of the Sharing > preferences pane.

The local hostname is your computer’s name with .local added, and any spaces are replaced with hyphens. For example, if your computer’s name is My Computer, your local network name is My-Computer.local. If your Mac has the exact name of another Mac on your local network, a number is added to the local network name.

---

Local hostnames are not case sensitive, so my-computer.local is the same as > My-Computer.local.

1. Choose Apple menu > System Preferences, then click Sharing.

2. Click Edit, then enter a new local hostname.

---

If your computer name is not recognized by Bonjour, the local network name is Macintosh.local.

If all fails, try changing $HOSTNAME to your IP address per suggestion by @kimfucious, and see if you can access it via IP.

[kimfucious]

I noticed that when starting Gatsby with gatsby develop -H 192.168.1.101 -p 8000 that, while I can open the dev site on other devices in my local network, HMR is not longer auto-refreshing pages. @pieh, can we reopen this issue, or should I create a new one?

[pieh]

Please create new one that will capture exact problem.

[hsribei]

@ryanditjia I tried accessing directly via local IP but that didn't work either. I then used gatsby develop --host 0.0.0.0 and it worked.

I also found out that $HOSTNAME is resolved by mDNS/Bonjour/ZeroConfig, which is not supported on my Android's Chrome browser (as reported in this bug). So I guess manual IP it is. ¯_(ツ)_/¯ Thanks for the assistance!