Ayer tuvimos una discusión sobre esto en el chat de Discord, y aparentemente vincular solo la IP local es una decisión de diseño. Mi opinión también es que Gatsby debería comportarse como otras herramientas de compilación (create-react-app o Meteor) y tener un servidor de desarrollo que sea accesible en red.

_httpteapot_:
¿Gatsby development (v1 o v2) puede vincular un puerto para que sea accesible desde la red local usando $ MY_COMPUTER_IP: 8000?
Como create-react-app, por ejemplo

_ghardin137_
solo durante el desarrollo o con "gatsby serve"

_httpteapot_
Me interesa esa función durante el desarrollo, pero gatsby Develop no abre un puerto accesible a la red
(a menos que el problema sea otra cosa)

_LekoArts_
obtenga su ip local con, por ejemplo, devip (paquete npm) y luego use -H $ YOURIP $ -p $ YOURPORT $

_ghardin137_
por defecto escucha en 0.0.0.0
que seria cualquier cosa
por lo que debería ser accesible a la red

_httpteapot_
Hum, así que se supone que funciona, porque lo intenté en múltiples redes en múltiples ocasiones y nunca pude conectarme al servidor de desarrollo desde un dispositivo diferente en mi red.

_ghardin137_
Puedo probarlo muy rápido pero estoy bastante seguro de que funciona

_httpteapot_
y siempre estuvo trabajando en create-react-app y otras herramientas

_LekoArts_
Tampoco funcionó para mí. Por eso uso la bandera -H

_httpteapot_
Estoy en linux

_LekoArts_
windows 10 aquí

_ghardin137_
trabajando bien en ganar 10 aquí para mí

_httpteapot_
No estoy familiarizado con el indicador -H, ¿a qué comando debo agregarlo?

_LekoArts_
gatsby desarrolla -H% YOURIP $

_ghardin137_
espera, estaba en modo de servicio
el desarrollo es solo local

_httpteapot_
Bueno que sea reproducible: smiley:
Y la bandera -H está funcionando

_ghardin137_
sí, así que gatsby build entonces gatsby serve funciona: smiley:

_httpteapot_
Pero mi caso de uso es el modo de desarrollo y la prueba en mi teléfono móvil
Eso es bastante común, supongo

_LekoArts_
Desde browserSync, sí

_ghardin137_
Si

_httpteapot_
¿Debo abrir un problema en el repositorio de gatsby?

_ghardin137_
Sospecho que esto está funcionando según lo previsto, pero tener esa bandera documentada sería útil

_httpteapot_
Bueno, abre una solicitud de función
Me parece más intuitivo el funcionamiento de la aplicación meteor + create-react-app

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

_ [GaiJin] XiaoDie_
@LekoArts Gracias por el truco de la bandera -H: leve_sonrisa:

_ghardin137_
si quisieras poner un PR para actualizar los documentos con esa información, estoy seguro de que estarían abiertos a eso: smiley:

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

_ghardin137_
probablemente no estaría de más tener una lista completa de las opciones allí también: smiley:

_LekoArts_
Una vez hice un PR para eso
No les gustó

_ghardin137_
pero dice que el desarrollo está solo en localhost
entonces eso tiene sentido

También puede usar gatsby develop -H 0.0.0.0

Gracias, @mquandalle.

Asegúrese de tener en cuenta en nuestro trabajo / discusiones futuros que el uso del enfoque gatsby develop -H 192.168.1.100 -p 8000 (estoy usando MacOS) parece evitar que funcione la actualización en caliente de HMR (al menos con mis esfuerzos hasta ahora).

¿Qué dispositivos estás usando? HMR todavía funciona para mí. FWIW Estoy usando Mac y iPhone, tal vez se hablen mejor 😄

Hola de nuevo, @ryanditjia : smile:

Gracias por tu contribución.

Estoy ejecutando el servidor en MacOS y accedo al sitio que se sirve en la misma máquina, usando Chrome, Firefox y Safari. Mis otros dispositivos de la LAN local son iOS y Android.

Para ser preciso:

Estoy usando hilo

Tengo la siguiente entrada de scripts como parte de 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"
  },

Cuando ejecuto yarn dev , solo puedo acceder al sitio localmente usando http://localhost:8000 desde la máquina que actualmente sirve al sitio. HMR funciona bien.

Cuando ejecuto yarn dev-m , puedo acceder al sitio desde otros dispositivos en mi LAN local, usando http://192.168.1.10:8000 (IP del servidor), pero HMR no actualiza automáticamente los cambios.

Si HMR realmente está funcionando en su configuración, me interesaría conocer más detalles que pueda tener sobre su configuración que podría probar de mi lado.

Francamente, estoy de acuerdo con @mquandalle en que Gatsby debería funcionar un poco más como create-react-app y Meteor , pero, como ella dijo, esta es una decisión de diseño.

Intenté crear un iniciador predeterminado de Gatsby vacío y aquí están mis hallazgos:

HMR en pleno funcionamiento

• gatsby develop -H $HOSTNAME -p 8000
  Esto funciona mejor para las personas que trabajan con varias máquinas porque su nombre de host es dinámico.
  Por ejemplo: Name-iMac. local: 8000 y Name-MacBook. local: 8000 (guardo estas 2 direcciones en mi dispositivo móvil para facilitar el acceso)
• gatsby develop -H 192.168.1.105 -p 8000
  Codificar la IP no es exactamente bonito ni flexible.

HMR parcialmente funcionando

• gatsby develop -H 0.0.0.0 -p 8000
  La IP del servidor es dinámica. En mi caso, 192.168.1.105:8000.
  HMR funciona para la máquina (tanto 0.0.0.0:8000 como 192.168.1.105:8000); pero no para los dispositivos de red.

¿Puedes comprobar si experimentas lo mismo?

Gracias por la respuesta detallada, @ryanditjia.

Aquí es donde estoy:

• Tanto gatsby develop -H $HOSTNAME -p 8000 como gatsby develop -H 192.168.1.105 -p 8000 permiten el acceso desde el servidor que ejecuta Gatsby y los dispositivos LAN locales por nombre de host, a través del nombre de host y la dirección IP respectivamente, pero aún así no tengo HMR.

Cuando digo que HMR no funciona, estoy haciendo una prueba simple para cambiar el texto de un archivo y guardarlo. No ocurre nada ni tampoco nada visible en la consola de herramientas de desarrollo del navegador.

Si, después de realizar y guardar cambios, CTRL-C salgo del servidor Gatsby, se muestra la siguiente advertencia en la consola de herramientas de desarrollo del navegador.

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 sin parámetros permite el acceso solo en la máquina donde se está ejecutando el servidor de desarrollo Gatsby y no desde otros dispositivos en la LAN local. HMR se actualiza casi inmediatamente después de cualquier compilación causada por guardar cambios en un archivo.

Eso es extraño. ¿Has probado esto en un motor de arranque limpio de gatsby?

Ciertamente extraño,

Como prueba de cordura, hice una nueva descarga e instalación, usando gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog . Lamentablemente, mis resultados son los mismos que antes.

Intenté lo mismo con gatsby new gatsby-example-site y aún no hay actualización automática.

Para que conste, mi versión de cliente gatsby es 1.1.58, pero tuve el mismo problema en 1.1.52

Obtuve exactamente el mismo resultado que @ryanditjia.

gatsby 1.1.58 (probado con gatsby-starter-forty )
npm 6.3.0
nodo 8.11.3
ubuntu 16

Problema: HMR solo funciona cuando se usa una IP codificada

La solución codificada que propuso @ryanditjia ( gatsby develop --host 192.168.0.18 --port 8000 ) funcionó muy bien para mí, ya que puedo acceder a ella en otros dispositivos con HMR.

Hay una advertencia (con la que puedo vivir totalmente): no puedo acceder a él a través de localhost:8000 en mi máquina. En su lugar, tengo que usar 192.168.0.18:8000 o My-Mac.local:8000 .

El mayor problema que he notado es que no siempre tengo la misma IP local cuando me conecto a la red y esto significa que tengo que cambiar constantemente la IP codificada en mi package.json .

Solución: obtenga IP de forma dinámica

Quería una forma de obtener dinámicamente mi IP local y usarla como un valor para --host y, finalmente, logré hackear mi camino para que funcione. De mi 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
}

Solo lo probé en mi máquina (macOS) y utilicé la versión de Gatsby 2.0.0-rc.11 así que no sé si puede copiarlo y pegarlo en su package.json y hacerlo funcionar. Pero podría ayudar a otros a crear su propia solución personalizada.

Breve explicación del código

• Usando ifconfig puedo obtener una mancha de texto con información en mi red.
• Dentro de ese blob hay un texto con mi IP local: inet 192.168.0.18 .
• Para encontrar esa pieza, canalizo todo el texto a awk y uso una expresión regular para encontrar inet 192.168.x.y (donde x y y se pueden reemplazar con cualquier número de 0 a 999) e imprima la IP.
• Esa IP luego se usa para --host en la llamada de script gatsby develop .

Usándolo directamente en la línea de comando

El comando que se usa en package.json tiene barras invertidas dobles para evitar la función de carácter de escape de la barra invertida en JS / JSON ( más información ). En resumen, si desea probar este código en la línea de comando, use lo siguiente:

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

Si lo está probando en la línea de comandos y lo está cambiando para que se ajuste a sus necesidades, recuerde volver a agregar las barras diagonales inversas dobles si desea usarlo en scripts de su package.json .

¡Parece que algo debe haber cambiado! Lo único que me funciona es gatsby develop -H 0.0.0.0 pero no obtengo HMR en mi dispositivo.
Intenté el resto pero no se conecta en absoluto en mi máquina local o mi teléfono.

EDITAR: Se me acaba de ocurrir que tengo laravel valet instalado en esta computadora y tal vez por eso no me funciona. Podría hacer que casi funcione con gatsby develop --host $(hostname) pero esto solo funciona localmente, no en mi red.

$HOSTNAME casi no está configurado en mis máquinas. Entonces necesito este y funciona perfectamente en mis dispositivos de red local:

gatsby develop -H $(hostname) -p 8000

Este es ahora mi comando de desarrollo predeterminado establecido en package.json y se ejecuta con yarn develop . ¡Excelente!

Esto debe solucionarse a través de https://github.com/gatsbyjs/gatsby/pull/11227

¡Agradable! Entonces, ¿cuál es la forma recomendada de ver un sitio de desarrollo desde otro dispositivo? ¿Es gatsby develop -H $(hostname) -p 8000 o hay otra forma?

@TylerBarnes Debería poder ejecutar gatsby develop -H 0.0.0.0 y abrir la máquina en <IP>:8000 en otro dispositivo de la red

¡Genial, gracias @sidharthachatterjee!

Ventanas:
para cmd
for / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') ¿gatsby desarrolla --host% i
en la configuración cambiar "a"
for / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') ¿gatsby desarrolla --host% i

Linux:
gatsby desarrollar --host $ (ruta -n | grep ^ 0.0.0.0 | awk '{imprimir $ 2}')

En macOS, creo que también debe tener habilitado el uso compartido de archivos ( System Preferences -> Sharing ).

Además, el campo Computer Name se puede utilizar en su URL. Por ejemplo, el nombre de mi computadora es kyoto y puedo acceder a mi sitio de desarrollo de forma remota (en la misma red) a través de http://kyoto.local:8000 .

gatsby develop -H 0.0.0.0 ahora funciona bien, 🎉

¿Alguien sabe cómo hacer que esto funcione con la opción --open ? La URL que abre http://0.0.0.0:8000/ realidad no funciona. Puedo ir manualmente a localhost: 8000 pero prefiero no hacerlo

EDITAR: De los documentos

Nota: no puede visitar 0.0.0.0:8000 en Windows (pero las cosas funcionarán usando localhost: 8000 o la URL "En su red" en Windows)

Parece extraño que el caso no se maneje

@crhistianramirez Desafortunadamente, ese caso de borde es un problema de Windows (que surgió durante algunas pruebas, por lo que agregamos una nota en los documentos) 😞

Hola,

¿Cómo puedo agregar gatsby develop -H 0.0.0.0 a mi archivo package.json ? Intenté ponerlo en scripts como este, pero no funciona:

"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 Eso se ve bien. ¿Estás seguro de que lo estás ejecutando con npm run develop ? Si es así, entonces tal vez gatsby develop -H 0.0.0.0 no funcione en su máquina por alguna razón.

@nikoladev Estaba ejecutando simplemente gatsby develop 🙈 ¡Muchas gracias por tu ayuda!

Tuve el mismo problema pero parecía ser un navegador. Originalmente estaba usando Firefox pero parece estar funcionando bien en Microsoft Edge

¿Alguien ha intentado invertir el proxy: 8000 con nginx? ¿Funcionará en tu opinión?