Gatsby: Testing Site with Gatsby Develop from Local LAN

[kimfucious]

Summary

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 localhost to an IP address.

I've checked for existing plugins as suggested, before trying a custom webpack config, 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?

:point_up: I got a clever suggestion to use gatsby develop -H 192.168.1.100 -p 8000 from @ryanditjia on #5733, which does work; however, HMR seems to stop auto refreshing changes when using this.

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

[mquandalle]

We had a discussion about this on the Discord chat yesterday, and apparently binding only the local IP is a design decision. My opinion is also that Gatsby should behave like other build tools (create-react-app or Meteor) and have a development server that is network accessible.

Chat details

_httpteapot_:
Does gatsby develop (v1 or v2) can bind a port so that its accessible from the local network using $MY_COMPUTER_IP:8000?
Like create-react-app for instance

_ghardin137_
only during development or with "gatsby serve"

_httpteapot_
I'm interested in that feature during development, but gatsby develop doesn't open a network accessible port
(unless the problem is something else)

_LekoArts_
get your local ip with e.g. devip (npm package) and then use -H $YOURIP$ -p $YOURPORT$

_ghardin137_
by default it listens on 0.0.0.0
which would be anything
so it should be accessible to the network

_httpteapot_
Hum so it's supposed to work, because I've tried on multiple networks on multiple occasions and I never was able to connect to the development server from a different device on my network

_ghardin137_
i can try it real fast but i'm pretty sure it works

_httpteapot_
and it was always working on create-react-app and others tools

_LekoArts_
It also never worked for me. That's why I use the -H flag

_httpteapot_
I'm on linux

_LekoArts_
windows 10 here

_ghardin137_
working fine on win 10 here for me

_httpteapot_
I'm not familiar with -H flag, which command should I add it to?

_LekoArts_
gatsby develop -H %YOURIP$

_ghardin137_
wait i was in serve mode
develop is local only

_httpteapot_
Good that it's reproducible :smiley:
And -H flag is indeed working

_ghardin137_
yeah so gatsby build then gatsby serve does work :smiley:

_httpteapot_
But my use case is development mode and test on my mobile phone
That's pretty common I guess

_LekoArts_
Since browserSync, yes

_ghardin137_
yeah

_httpteapot_
Should I open an issue on the gatsby repo?

_ghardin137_
i suspect this is working as intended, but having that flag documented would be useful

_httpteapot_
Well so open a feature request
I find the way meteor + create-react-app work more intuitive

_ghardin137_
https://github.com/gatsbyjs/gatsby/issues/561

_[GaiJin]XiaoDie_
@LekoArts Thx for the -H flag trick :slight_smile:

_ghardin137_
if you wanted to put in a PR to update the docs with that info i'm sure they'd be open to that :smiley:

_LekoArts_
https://www.gatsbyjs.org/docs/

_ghardin137_
probably wouldn't hurt to have a full listing of the options there too :smiley:

_LekoArts_
I once did a PR for that
They didn't like it

_ghardin137_
but it does say that develop is on localhost only
so that makes sense

[mquandalle]

You can also use gatsby develop -H 0.0.0.0

[kimfucious]

Thanks, @mquandalle.

Please be sure to note in our future work/discussions that using the gatsby develop -H 192.168.1.100 -p 8000 (I'm using MacOS) approach does seem to prevent HMR hot refresh from working (at least with my efforts thus far).

[ryanditjia]

What devices are you using? HMR still works for me. FWIW I’m using Mac and iPhone, perhaps they talk to each other better 😄

[kimfucious]

Hello again, @ryanditjia :smile:

Thanks for your input.

I'm running the server on MacOS, and access the site being served on the same machine, using Chrome, Firefox, and Safari. My other devices from the local LAN are both iOS and Android.

To be precise:

I'm using yarn

I have the following scripts entry as part of package.json:

"scripts": {
    "build": "gatsby build",
    "dev": "gatsby develop",
    "dev-m": "gatsby develop -H 0.0.0.0 -p 8000",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

When I run yarn dev, I can only access the site locally using http://localhost:8000 from the machine currently serving the site. HMR works fine.

When I run yarn dev-m, I can access the site from other devices on my local LAN, using http://192.168.1.10:8000 (IP of the server), but HMR does not automatically refresh changes.

If HMR is really working on your setup, I'd be interested in any further details you might have on your setup that I could try on my side.

Frankly, I do agree with @mquandalle that Gatsby should work a bit more like create-react-app and Meteor, but--as she said--this is a design decision.

[ryanditjia]

I tried creating an empty Gatsby default starter and here are my findings:

HMR fully working

• gatsby develop -H $HOSTNAME -p 8000
  This works the best for people working with multiple machines because its hostname is dynamic.
  E.g.: Name-iMac.local:8000 and Name-MacBook.local:8000 (I bookmark these 2 addresses on my mobile device for ease of access)
• gatsby develop -H 192.168.1.105 -p 8000
  Hardcoding the IP isn’t exactly pretty—or flexible.

HMR partially working

• gatsby develop -H 0.0.0.0 -p 8000
  The IP of the server is dynamic. In my case, 192.168.1.105:8000.
  HMR works for the machine (both 0.0.0.0:8000 and 192.168.1.105:8000); but doesn’t for network devices.

Can you check if you experience the same?

[kimfucious]

Thanks for the detailed response, @ryanditjia.

Here's where I'm at:

• Both gatsby develop -H $HOSTNAME -p 8000 and gatsby develop -H 192.168.1.105 -p 8000 allow access from the server running Gatsby and local LAN devices by hostname, via the host name and ip address respectively, but still no HMR for me.

When I say HMR isn't working, I'm doing a simple test of changing text in a file and saving it. Nothing happens and nothing visible in the browser dev tools console either.

If, after making and saving a changes, I CTRL-C out of the Gatsby server, the following warning is displayed in the browser dev tools console.

Update check failed: Error: Manifest request to http://server.local:8000/5bd5e2fb7d66e8b025f1.hot-update.json timed out. process-update.js:136
    at XMLHttpRequest.request.onreadystatechange (http://server.local:8000/commons.js:34:23)

• gatsby-develop with no parameters allows access only on the machine where Gatsby dev server is running and not from other devices on the local LAN. HMR updates almost immediately after any compile caused by saving changes to a file.

[ryanditjia]

That’s strange. Have you tried this on a clean gatsby starter?

[kimfucious]

Strange indeed, @ryanditjia :confused:

As a sanity check, I just did a fresh download and install, using gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog. Sadly, my results are the same as before.

Just tried the same thing with gatsby new gatsby-example-site and still no automatic refresh.

For the record, my gatsby client version is 1.1.58, but I had the same issue on 1.1.52

[vilian]

I got exactly the same result as @ryanditjia.

gatsby 1.1.58 (tested with gatsby-starter-forty)
npm 6.3.0
node 8.11.3
ubuntu 16

[nikoladev]

Problem: HMR only works when using a hardcoded IP

The hardcoded solution that @ryanditjia proposed (gatsby develop --host 192.168.0.18 --port 8000) worked great for me as I can access it on other devices with HMR.

There is one caveat (that I can totally live with): I can't access it through localhost:8000 on my machine. Instead I have to use 192.168.0.18:8000 or My-Mac.local:8000.

The bigger problem I've noticed is that I don't always have the same local IP when I connect to the network and this means that I constantly have to change the hardcoded IP in my package.json.

Solution: Get IP dynamically

I wanted a way to dynamically get my local IP and use that as a value for --host and eventually I've managed to hack my way into making it work. From my package.json:

{
  "scripts": {
    "develop": "gatsby develop --host $(ifconfig | awk '/inet 192\\.168\\.[0-9]+\\.[0-9]+/{print $2}') --port 8000",
    // ... other scripts
  },
  // ... other package.json stuff
}

I have only tested it on my machine (macOS) and using Gatsby version 2.0.0-rc.11 so I don't know if you can just copy and paste it into your package.json and have it working. But it could help others in making their own custom solution.

Short explanation of the code

• Using ifconfig I can get a blob of text with info on my network.
• Inside that blob there's this piece of text with my local IP: inet 192.168.0.18.
• To find that piece I pipe that entire blob of text to awk and use a RegEx to find inet 192.168.x.y (where x and y can be replaced with any number from 0 to 999) and print the IP.
• That IP is then used for --host in the gatsby develop script call.

Using it directly on the command line

The command that is used in the package.json has double backslashes to work around the escape character function of the backslash in JS/JSON (more info). In short, if you want to try this code out in the command line, use the following:

gatsby develop --host $(ifconfig | awk '/inet 192\.168\.[0-9]+\.[0-9]+/{print $2}') --port 8000

If you're trying it out on the command line and changing it to fit your needs, remember to add the double backslashes back in if you want to use it in scripts of your package.json.

[TylerBarnes]

Seems like something must've changed! The only thing that kinda works for me is gatsby develop -H 0.0.0.0 but I don't get HMR on my device.
I tried the rest but it doesn't connect at all on my local machine or my phone.

EDIT: Just occurred to me that I have laravel valet installed on this computer and that's maybe why this doesn't work for me. I could get it to almost work with gatsby develop --host $(hostname) but this only works locally, not on my network.

[ghost]

$HOSTNAME is almost not set on my machines. So I need this one and it works flawless across my local network devices:

gatsby develop -H $(hostname) -p 8000

This is now my default develop command set in package.json and run with yarn develop. Great!

[sidharthachatterjee]

This should be fixed via https://github.com/gatsbyjs/gatsby/pull/11227

[TylerBarnes]

Nice! So what's the recommended way to view a dev site from another device? is it gatsby develop -H $(hostname) -p 8000 or is there another way?

[sidharthachatterjee]

@TylerBarnes You should be able to run gatsby develop -H 0.0.0.0 and open the machine at <IP>:8000 on another device on the network

[TylerBarnes]

Awesome, thanks @sidharthachatterjee!

[Magikon]

Windows:
for cmd
for /f "tokens=4" %i in ('route print ^| find " 0.0.0.0"') do gatsby develop --host %i
in config change " to "
for /f "tokens=4" %i in ('route print ^| find " 0.0.0.0"') do gatsby develop --host %i

Linux:
gatsby develop --host $(route -n | grep ^0.0.0.0 | awk '{print $2}')

[bryndyment]

On macOS, I believe you also need to have file sharing enabled (System Preferences -> Sharing).

Also, the Computer Name field can be used in your URL. For example, my computer name is kyoto and I'm able to access my dev site remotely (on the same network) via http://kyoto.local:8000.

[monsieurnebo]

gatsby develop -H 0.0.0.0 is now working fine, 🎉

[crhistianramirez]

Anybody know how to get this working with the --open option? The url that opens http://0.0.0.0:8000/ doesn't actually work. I can manually go to localhost:8000 but i'd rather not

EDIT: From the docs

Note: you can’t visit 0.0.0.0:8000 on Windows (but things will work using either localhost:8000 or the “On Your Network” URL on Windows)

Seems odd that case isn't handled

[sidharthachatterjee]

@crhistianramirez That edge case is unfortunately a Windows issue (that surfaced during some testing so we added a note in the docs) 😞

[iloveip]

Hi there,

How can I add gatsby develop -H 0.0.0.0 to my package.json file? I tried to put it in scripts like this, but it doesn't work:

"scripts": {
  "build": "gatsby build",
  "develop": "gatsby develop -H 0.0.0.0",
  "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
  "start": "npm run develop",
  "serve": "gatsby serve",
  "clean": "gatsby clean",
  "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
}

[nikoladev]

@iloveip That looks alright. Are you sure you are running it with npm run develop? If so, then maybe gatsby develop -H 0.0.0.0 doesn't work on your machine for some reason.

[iloveip]

@nikoladev I was running simply gatsby develop 🙈 Thank you very much for your help!

[ShreyaB8]

I had the same issue but it seemed to be a browser. I was originaly using Firefox but it seems to be working fine on Microsoft Edge

[romainbessugesmeusy]

Has anyone tried to reverse proxy the :8000 with nginx? Will it work in your opinion?