Conversamos sobre isso ontem no bate-papo do Discord e, aparentemente, vincular apenas o IP local é uma decisão de design. Minha opinião também é que Gatsby deve se comportar como outras ferramentas de construção (criar-reagir-app ou Meteor) e ter um servidor de desenvolvimento acessível pela rede.

_httpteapot_:
O gatsby Develop (v1 ou v2) pode vincular uma porta para que seja acessível a partir da rede local usando $ MY_COMPUTER_IP: 8000?
Como criar-reagir-app, por exemplo

_ghardin137_
apenas durante o desenvolvimento ou com "gatsby serve"

_httpteapot_
Estou interessado nesse recurso durante o desenvolvimento, mas gatsby Develop não abre uma porta acessível de rede
(a menos que o problema seja outra coisa)

_LekoArts_
obtenha seu ip local com, por exemplo, devip (pacote npm) e, em seguida, use -H $ YOURIP $ -p $ YOURPORT $

_ghardin137_
por padrão, escuta em 0.0.0.0
o que seria qualquer coisa
então deve ser acessível para a rede

_httpteapot_
Hum, então deve funcionar, porque eu tentei em várias redes em várias ocasiões e nunca consegui me conectar ao servidor de desenvolvimento de um dispositivo diferente na minha rede

_ghardin137_
posso tentar bem rápido, mas tenho certeza de que funciona

_httpteapot_
e estava sempre trabalhando em criar-reagir-app e outras ferramentas

_LekoArts_
Também nunca funcionou para mim. É por isso que uso o sinalizador -H

_httpteapot_
Estou no linux

_LekoArts_
windows 10 aqui

_ghardin137_
trabalhando bem no win 10 aqui para mim

_httpteapot_
Não estou familiarizado com o sinalizador -H, a qual comando devo adicioná-lo?

_LekoArts_
gatsby desenvolver -H% YOURIP $

_ghardin137_
espere, eu estava no modo de servir
desenvolver é apenas local

_httpteapot_
É bom que seja reproduzível: smiley:
E a bandeira -H está realmente funcionando

_ghardin137_
sim, então gatsby build então gatsby serve funciona: smiley:

_httpteapot_
Mas meu caso de uso é o modo de desenvolvimento e teste no meu celular
Isso é muito comum eu acho

_LekoArts_
Desde browserSync, sim

_ghardin137_
sim

_httpteapot_
Devo abrir um problema no repositório gatsby?

_ghardin137_
Eu suspeito que isso está funcionando conforme o esperado, mas ter esse sinalizador documentado seria útil

_httpteapot_
Bem, então abra uma solicitação de recurso
Acho a forma como meteoro + criar-reagir-app funcionam mais intuitiva

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

_ [GaiJin] XiaoDie_
@LekoArts Thx pelo truque da bandeira -H: light_smile:

_ghardin137_
se você quisesse fazer um PR para atualizar os documentos com essa informação, tenho certeza que eles estariam abertos para isso: smiley:

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

_ghardin137_
provavelmente não faria mal ter uma lista completa das opções lá também: smiley:

_LekoArts_
Uma vez fiz uma RP para isso
Eles não gostaram

_ghardin137_
mas diz que o desenvolvimento está apenas no host local
então isso faz sentido

Você também pode usar gatsby develop -H 0.0.0.0

Obrigado, @mquandalle.

Certifique-se de observar em nosso trabalho / discussões futuras que usar a abordagem gatsby develop -H 192.168.1.100 -p 8000 (estou usando MacOS) parece impedir que a atualização a quente HMR funcione (pelo menos com meus esforços até agora).

Quais dispositivos você está usando? HMR ainda funciona para mim. FWIW Estou usando Mac e iPhone, talvez eles conversem melhor 😄

Olá de novo, @ryanditjia : smile:

Obrigado pela sua contribuição.

Estou rodando o servidor no MacOS e acesso o site que está sendo servido na mesma máquina, usando Chrome, Firefox e Safari. Meus outros dispositivos da LAN local são iOS e Android.

Para ser mais preciso:

Estou usando fio

Eu tenho a seguinte 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"
  },

Quando executo yarn dev , só posso acessar o site localmente usando http://localhost:8000 da máquina que está servindo o site no momento. HMR funciona bem.

Quando executo yarn dev-m , posso acessar o site de outros dispositivos em minha LAN local, usando http://192.168.1.10:8000 (IP do servidor), mas o HMR não atualiza as alterações automaticamente.

Se o HMR estiver realmente trabalhando em sua configuração, estou interessado em quaisquer detalhes adicionais que você possa ter sobre sua configuração que eu possa experimentar por mim.

Francamente, concordo com @mquandalle que Gatsby deve funcionar um pouco mais como create-react-app e Meteor , mas - como ela disse - esta é uma decisão de design.

Tentei criar um iniciador padrão Gatsby vazio e aqui estão minhas descobertas:

HMR totalmente funcional

• gatsby develop -H $HOSTNAME -p 8000
  Isso funciona melhor para pessoas que trabalham com várias máquinas porque seu nome de host é dinâmico.
  Ex: Name-iMac. local: 8000 e Name-MacBook. local: 8000 (eu marquei esses 2 endereços no meu dispositivo móvel para facilitar o acesso)
• gatsby develop -H 192.168.1.105 -p 8000
  Codificar o IP não é exatamente bonito - ou flexível.

HMR funcionando parcialmente

• gatsby develop -H 0.0.0.0 -p 8000
  O IP do servidor é dinâmico. No meu caso, 192.168.1.105:8000.
  HMR funciona para a máquina (0.0.0.0:8000 e 192.168.1.105:8000); mas não para dispositivos de rede.

Você pode verificar se você experimenta o mesmo?

Obrigado pela resposta detalhada, @ryanditjia.

É aqui que estou:

• Ambos gatsby develop -H $HOSTNAME -p 8000 e gatsby develop -H 192.168.1.105 -p 8000 permitem acesso do servidor rodando Gatsby e dispositivos LAN locais pelo nome do host, através do nome do host e endereço IP respectivamente, mas ainda sem HMR para mim.

Quando digo que o HMR não está funcionando, estou fazendo um teste simples para alterar o texto em um arquivo e salvá-lo. Nada acontece e nada fica visível no console das ferramentas de desenvolvimento do navegador.

Se, depois de fazer e salvar as alterações, eu CTRL-C sair do servidor Gatsby, o seguinte aviso é exibido no console de ferramentas de desenvolvimento do 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 sem parâmetros permite acesso apenas na máquina onde o servidor de desenvolvimento Gatsby está sendo executado e não de outros dispositivos na LAN local. O HMR é atualizado quase imediatamente após qualquer compilação causada pelo salvamento de alterações em um arquivo.

Isso é estranho. Você já experimentou isso em um starter gatsby limpo?

De fato estranho, @ryanditjia : confused:

Como uma verificação de integridade, acabei de fazer um novo download e instalar, usando gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog . Infelizmente, meus resultados são os mesmos de antes.

Acabei de tentar a mesma coisa com gatsby new gatsby-example-site e ainda sem atualização automática.

Para registro, minha versão do cliente gatsby é 1.1.58, mas tive o mesmo problema em 1.1.52

Obtive exatamente o mesmo resultado que @ryanditjia.

gatsby 1.1.58 (testado com gatsby-starter-forty )
npm 6.3.0
nó 8.11.3
Ubuntu 16

Problema: o HMR só funciona ao usar um IP codificado

A solução codificada que @ryanditjia propôs ( gatsby develop --host 192.168.0.18 --port 8000 ) funcionou muito bem para mim, pois posso acessá-la em outros dispositivos com HMR.

Há uma ressalva (com a qual posso viver totalmente): não consigo acessá-lo por meio de localhost:8000 em minha máquina. Em vez disso, tenho que usar 192.168.0.18:8000 ou My-Mac.local:8000 .

O maior problema que percebi é que nem sempre tenho o mesmo IP local quando me conecto à rede e isso significa que tenho que mudar constantemente o IP codificado no meu package.json .

Solução: obter IP dinamicamente

Eu queria uma maneira de obter meu IP local dinamicamente e usá-lo como um valor para --host e, eventualmente, consegui hackear meu caminho para fazê-lo funcionar. Do meu 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
}

Eu apenas testei em minha máquina (macOS) e usando Gatsby versão 2.0.0-rc.11 então não sei se você pode simplesmente copiar e colar em seu package.json e fazê-lo funcionar. Mas pode ajudar outras pessoas a fazer sua própria solução personalizada.

Breve explicação do código

• Usando ifconfig , posso obter um blob de texto com informações na minha rede.
• Dentro desse blob há um pedaço de texto com meu IP local: inet 192.168.0.18 .
• Para encontrar essa parte, canalizo todo o blob de texto para awk e uso um RegEx para encontrar inet 192.168.x.y (onde x e y podem ser substituídos por qualquer número de 0 a 999) e imprima o IP.
• Esse IP é então usado para --host na chamada de script gatsby develop .

Usando-o diretamente na linha de comando

O comando que é usado em package.json tem barras invertidas duplas para contornar a função de caractere de escape da barra invertida em JS / JSON ( mais informações ). Resumindo, se você quiser experimentar este código na linha de comando, use o seguinte:

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

Se você estiver experimentando na linha de comando e alterando-o para atender às suas necessidades, lembre-se de adicionar as barras duplas invertidas se quiser usá-lo em scripts de seus package.json .

Parece que algo mudou! A única coisa que funciona para mim é gatsby develop -H 0.0.0.0 mas não recebo HMR no meu dispositivo.
Eu tentei o resto, mas ele não conecta na minha máquina local ou no meu telefone.

EDIT: Acabei de me ocorrer que tenho laravel valet instalado neste computador e talvez seja por isso que isso não funciona para mim. Eu poderia fazer quase funcionar com gatsby develop --host $(hostname) mas isso só funciona localmente, não na minha rede.

$HOSTNAME quase não está definido em minhas máquinas. Então, preciso deste e funciona perfeitamente em meus dispositivos de rede local:

gatsby develop -H $(hostname) -p 8000

Este é agora o meu comando de desenvolvimento padrão definido em package.json e executado com yarn develop . Ótimo!

Isso deve ser corrigido em https://github.com/gatsbyjs/gatsby/pull/11227

Agradável! Então, qual é a maneira recomendada de visualizar um site de desenvolvimento de outro dispositivo? é gatsby develop -H $(hostname) -p 8000 ou existe outra maneira?

@TylerBarnes Você deve ser capaz de executar gatsby develop -H 0.0.0.0 e abrir a máquina em <IP>:8000 em outro dispositivo na rede

Incrível, obrigado @sidharthachatterjee!

Janelas:
para cmd
para / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') do gatsby development --host% i
na configuração, mude "para"
para / f "tokens = 4"% i in ('route print ^ | find "0.0.0.0"') do gatsby development --host% i

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

No macOS, acredito que você também precisa ativar o compartilhamento de arquivos ( System Preferences -> Sharing ).

Além disso, o campo Computer Name pode ser usado em seu URL. Por exemplo, o nome do meu computador é kyoto e posso acessar meu site dev remotamente (na mesma rede) via http://kyoto.local:8000 .

gatsby develop -H 0.0.0.0 agora está funcionando bem, 🎉

Alguém sabe como fazer isso funcionar com a opção --open ? O url que abre http://0.0.0.0:8000/ realmente não funciona. Posso ir manualmente para localhost: 8000, mas prefiro não

EDIT: Dos documentos

Observação: você não pode visitar 0.0.0.0:8000 no Windows (mas as coisas funcionarão usando localhost: 8000 ou o URL “On Your Network” no Windows)

Parece estranho que o caso não seja resolvido

@crhistianramirez Esse caso extremo infelizmente é um problema do Windows (que apareceu durante alguns testes, então adicionamos uma observação na documentação) 😞

Olá,

Como posso adicionar gatsby develop -H 0.0.0.0 ao meu arquivo package.json ? Tentei colocá-lo em scripts como este, mas não funcionou:

"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 Isso parece certo. Tem certeza de que o está executando com npm run develop ? Se sim, talvez gatsby develop -H 0.0.0.0 não funcione na sua máquina por algum motivo.

@nikoladev Eu estava executando simplesmente gatsby develop 🙈 Muito obrigado por sua ajuda!

Eu tive o mesmo problema, mas parecia ser um navegador. Eu estava usando o Firefox, mas parece estar funcionando bem no Microsoft Edge

Alguém já tentou reverter o proxy: 8000 com nginx? Vai funcionar na sua opinião?