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 · 30 comments
Closed

Testing Site with Gatsby Develop from Local LAN #5801

kimfucious opened this issue Jun 8, 2018 · 30 comments

Comments

@kimfucious
Copy link

@kimfucious 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
Copy link
Contributor

@mquandalle 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
Copy link
Contributor

@mquandalle mquandalle commented Jun 8, 2018

You can also use gatsby develop -H 0.0.0.0

@kimfucious
Copy link
Author

@kimfucious 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
Copy link
Contributor

@ryanditjia 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
Copy link
Author

@kimfucious 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
Copy link
Contributor

@ryanditjia 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
Copy link
Author

@kimfucious 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
Copy link
Contributor

@ryanditjia ryanditjia commented Jun 10, 2018

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

@kimfucious
Copy link
Author

@kimfucious 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
Copy link

@vilian 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
Copy link
Contributor

@nikoladev 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
Copy link
Contributor

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

@ghost
Copy link

@ghost ghost 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
…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
Copy link
Member

@sidharthachatterjee sidharthachatterjee commented Jan 23, 2019

This should be fixed via #11227

@TylerBarnes
Copy link
Contributor

@TylerBarnes 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
Copy link
Member

@sidharthachatterjee 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
Copy link
Contributor

@TylerBarnes TylerBarnes commented Jan 23, 2019

Awesome, thanks @sidharthachatterjee!

@Magikon
Copy link

@Magikon Magikon commented Apr 5, 2019

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
Copy link
Contributor

@bryndyment bryndyment commented May 19, 2019

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
Copy link
Contributor

@monsieurnebo monsieurnebo commented May 22, 2019

gatsby develop -H 0.0.0.0 is now working fine, 🎉

@crhistianramirez
Copy link

@crhistianramirez crhistianramirez commented Aug 7, 2019

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
Copy link
Member

@sidharthachatterjee sidharthachatterjee commented Aug 7, 2019

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

afc163 added a commit to antvis/gatsby-theme-antv that referenced this issue Nov 1, 2019
@iloveip
Copy link

@iloveip iloveip commented May 22, 2020

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
Copy link
Contributor

@nikoladev nikoladev commented May 25, 2020

@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
Copy link

@iloveip iloveip commented May 26, 2020

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

@ShreyaB8
Copy link

@ShreyaB8 ShreyaB8 commented May 26, 2020

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

@romainbessugesmeusy romainbessugesmeusy commented May 26, 2020

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

alvinleung added a commit to alvinleung/portfolio-website-2 that referenced this issue Dec 9, 2020
@luka-bacic
Copy link

@luka-bacic luka-bacic commented Mar 18, 2021

I am not able to get the dev server working on other devices on the LAN. Specifically, on my Android phone on Chrome/Firefox, and the host machine is running Ubuntu 18.04 in wsl2 on Windows 10 Home.

Commands which I have tried:

gatsby develop -H 0.0.0.0

  • works on local machine
  • doesn't work on Android (connection times out)

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

  • works on local machine
  • doesn't work on Android (connection times out)

gatsby develop -H 172.29.129.132 -p 8000 (that's my LAN IP)

  • works on local machine
  • doesn't work on Android (connection times out)

gatsby develop -H $(hostname) -p 8000

  • doesn't work anywhere

gatsby develop -o -H $HOSTNAME -p 3000

  • doesn't work anywhere

gatsby develop -H $HOSTNAME -p 8000

  • doesn't work anywhere

gatsby info output:

System: OS: Linux 4.19 Ubuntu 18.04.5 LTS (Bionic Beaver) CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz Shell: 4.4.20 - /bin/bash Binaries: Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node npm: 7.6.0 - ~/.nvm/versions/node/v14.15.4/bin/npm npmPackages: gatsby: ^2.26.1 => 2.32.9 gatsby-image: ^2.10.0 => 2.10.0 gatsby-plugin-google-analytics: ^2.10.0 => 2.10.0 gatsby-plugin-manifest: ^2.11.0 => 2.11.0 gatsby-plugin-offline: ^3.9.0 => 3.9.0 gatsby-plugin-react-helmet: ^3.9.0 => 3.9.0 gatsby-plugin-react-leaflet: ^3.0.0 => 3.0.0 gatsby-plugin-resolve-src: ^2.1.0 => 2.1.0 gatsby-plugin-sass: ^3.1.0 => 3.1.0 gatsby-plugin-sharp: ^2.13.1 => 2.13.1 gatsby-plugin-sitemap: ^2.11.0 => 2.11.0 gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5 gatsby-source-filesystem: ^2.10.0 => 2.10.0 gatsby-transformer-sharp: ^2.11.0 => 2.11.0 npmGlobalPackages: gatsby-cli: 3.1.0

@jpvincent
Copy link

@jpvincent jpvincent commented Mar 22, 2021

Hi @luka-bacic
I'm also using Ubuntu behind a WSL2 and the -H 0.0.0.0 works for me (thank you all for this thread). Any device on my local network can require it.

Beware that the IP Ubuntu has is not the IP of the Windows on the network. If you see this :

$ gatsby serve -H 0.0.0.0
⠀
You can now view @pretto/website in the browser.
⠀
  Local:            http://localhost:9000/
  On Your Network:  http://172.30.205.218:9000/

The "Your Network" here is the network within Windows. Your Windows has a real IP on the network (more like 192.168.0.XX).

I suspect you more have a problem with the Windows Firewall not giving the request to Ubuntu ?
It was my case at least. If so, you'll have to configure the Firewall.
Because your Ubuntu IP in the Windows will change after each restart, you can automate the Firewall rule update with this script : https://gist.github.com/daehahn/497fa04c0156b1a762c70ff3f9f7edae?WT.mc_id=-blog-scottha

Hope this helps

@geekyshubham
Copy link

@geekyshubham geekyshubham commented Jul 23, 2021

You can also use gatsby develop -H 0.0.0.0

thanks buddy ✔️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet