Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Testing Site with Gatsby Develop from Local LAN #5801

Closed
kimfucious opened this Issue Jun 8, 2018 · 17 comments

Comments

Projects
None yet
9 participants
@kimfucious
Copy link

kimfucious commented Jun 8, 2018

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?

☝️ 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

This comment has been minimized.

Copy link
Contributor

mquandalle commented Jun 8, 2018

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 😃
And -H flag is indeed working

ghardin137
yeah so gatsby build then gatsby serve does work 😃

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
#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 😃

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

ghardin137
probably wouldn't hurt to have a full listing of the options there too 😃

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

This comment has been minimized.

Copy link
Contributor

mquandalle commented Jun 8, 2018

You can also use gatsby develop -H 0.0.0.0

@kimfucious

This comment has been minimized.

Copy link
Author

kimfucious commented Jun 8, 2018

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

This comment has been minimized.

Copy link
Contributor

ryanditjia commented Jun 8, 2018

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

This comment has been minimized.

Copy link
Author

kimfucious commented Jun 8, 2018

Hello again, @ryanditjia 😄

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

This comment has been minimized.

Copy link
Contributor

ryanditjia commented Jun 8, 2018

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

This comment has been minimized.

Copy link
Author

kimfucious commented Jun 9, 2018

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

This comment has been minimized.

Copy link
Contributor

ryanditjia commented Jun 10, 2018

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

@kimfucious

This comment has been minimized.

Copy link
Author

kimfucious commented Jun 10, 2018

Strange indeed, @ryanditjia 😕

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

This comment has been minimized.

Copy link

vilian commented Aug 10, 2018

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

This comment has been minimized.

Copy link
Contributor

nikoladev commented Sep 6, 2018

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

This comment has been minimized.

Copy link
Contributor

TylerBarnes commented Oct 19, 2018

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.

@crstnio

This comment has been minimized.

Copy link
Member

crstnio commented Jan 20, 2019

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

DSchau added a commit that referenced this issue Jan 23, 2019

fix(gatsby): Ensure publicPath is always relative for gatsby develop (#…
…11227)

In `gatsby develop` we were setting `publicPath` for `webpack-dev-server` to an absolute url  _constructed_ from the program host, port and protocol

This is unnecessary and causes HMR and static links to break when viewed on a separate device over a network like in this screenshot below
![screenshot 2019-01-23 19 04 21](https://user-images.githubusercontent.com/7701981/51617923-3dbc2d80-1f53-11e9-86cf-d4c49ec18f42.png)
This pull request fixes this by making the publicPath _always_ relative 

Fixes #11219 and #5801
@sidharthachatterjee

This comment has been minimized.

Copy link
Member

sidharthachatterjee commented Jan 23, 2019

This should be fixed via #11227

@TylerBarnes

This comment has been minimized.

Copy link
Contributor

TylerBarnes commented Jan 23, 2019

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

This comment has been minimized.

Copy link
Member

sidharthachatterjee commented Jan 23, 2019

@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

This comment has been minimized.

Copy link
Contributor

TylerBarnes commented Jan 23, 2019

Awesome, thanks @sidharthachatterjee!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.