Durante o desenvolvimento de aplicações web modernas com React, Angular ou Vue, grande parte do tempo é gasta ajustando layout, responsividade e comportamento em dispositivos móveis.
Normalmente usamos as ferramentas DevTools do navegador para simular telas menores. Porém, existe uma forma muito mais eficiente e realista de testar sua aplicação: acessando o servidor de desenvolvimento diretamente pelo celular na mesma rede.
No presente artigo, vou explicar como utilizar um comando para transformar seu ambiente local em um servidor acessível por qualquer dispositivo conectado ao mesmo Wi-Fi, permitindo testes reais de responsividade.
O problema com os simuladores de navegador
Ferramentas como o modo "Device Toolbar" do Chrome DevTools são excelentes para:
- visualizar diferentes tamanhos de tela
- simular breakpoints CSS
- testar rapidamente ajustes de layout
Mas elas possuem limitações importantes:
- não reproduzem com fidelidade o comportamento de toque (touch)
- não refletem exatamente a performance do dispositivo
- podem renderizar fontes e elementos de forma diferente
- não reproduzem 100% o comportamento de navegadores mobile reais
Ou seja: são simuladores, não substitutos do teste real.
A solução: expor o servidor local para a rede
Quando você executa um projeto frontend com o comando tradicional:
npm run dev
o servidor normalmente fica acessível apenas via:
http://localhost:3000 (app React) ou
http://localhost:4200 (app Angular)
Isso significa que somente o seu computador consegue acessá-lo.
Ao adicionar o parâmetro --host:
npm run dev -- --host
o servidor passa a ser disponibilizado também no endereço IP da sua máquina na rede local.
O que muda na prática
Após executar o comando com --host, o terminal geralmente exibe algo assim:
Local: http://localhost:5173
Network: http://192.168.0.15:5173
O endereço exibido na linha "Network" é exatamente o que você pode abrir no navegador do celular ou Tablet conectado ao mesmo Wi-Fi.
Basta acessar:
http://192.168.0.15:5173
e você verá sua aplicação executando diretamente no dispositivo real.
Como funciona em cada tecnologia
React com Vite
projetos React que utilizam Vite, o comando já funciona nativamente:
npm run dev -- --host
O próprio Vite se encarrega de expor o servidor na rede.
Angular
No Angular CLI o conceito é o mesmo, com sintaxe ligeiramente diferente:
ng serve --host 0.0.0.0
Ou via npm:
npm start -- --host 0.0.0.0
O efeito é idêntico: permitir acesso externo ao ambiente de desenvolvimento.
Vantagens de testar no celular ou Tablet real
Usar o acesso pela rede local traz benefícios diretos:
- Teste fiel de UX
- comportamento real de scroll
- funcionamento de gestos
- experiência real de toque
- validação verdadeira de menus e botões
- Validação correta de responsividade
- breakpoints CSS reais
- layouts flex e grid
- formulários
- modais
- animações
- desempenho em hardware real
- Debug mais próximo da produção
Você consegue testar:
O que você vê no celular é muito mais próximo do que o usuário final verá após o deploy.
Boas práticas ao utilizar --host
Para evitar problemas, siga estas recomendações:
- Certifique-se de que computador e celular estão na mesma rede Wi-Fi
- Desative VPNs que possam bloquear o acesso
- Verifique se o firewall não está bloqueando a porta do projeto
- Teste em mais de um navegador mobile (Chrome, Safari, Edge)
- Utilize diferentes tamanhos de tela reais
Dica extra: facilite o acesso com QR Code
Uma prática interessante é gerar um QR Code com o endereço exibido no terminal. Assim você pode abrir o site no celular sem precisar digitar o IP manualmente.
Existem extensões e ferramentas que fazem isso automaticamente a partir da URL exibida.
Considerações finais
O comando npm run dev -- --host no React ou ng serve --host 0.0.0.0 no Angular é um recurso simples, mas extremamente poderoso para o dia a dia do desenvolvedor frontend.
Ele permite:
- testar sua aplicação em dispositivos reais
- validar responsividade com precisão
- melhorar a qualidade da interface
- identificar problemas que simuladores não mostram
Se você ainda não utiliza essa abordagem, comece hoje mesmo. Sua produtividade e a qualidade do seu frontend vão melhorar consideravelmente.
Feito!
Nenhum comentário:
Postar um comentário