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.

You can also use gatsby develop -H 0.0.0.0

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

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

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.

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?

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.

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

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

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

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.

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.

$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!

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

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?

@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

Awesome, thanks @sidharthachatterjee!

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}')

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.

gatsby develop -H 0.0.0.0 is now working fine, 🎉

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

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

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"
}

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

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

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

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