Do localhost ao telemóvel: testar sites com Wi-Fi ou Cloudflare Tunnel

Quando estamos a criar um site, chega uma altura em que queremos pegar no telemóvel e experimentar. Ver se o design funciona num ecrã pequeno, se os botões são fáceis de tocar, se o menu abre bem e se conseguimos preencher um formulário sem dificuldades.

Reduzir a janela do browser ajuda, mas há coisas que só percebemos com o telemóvel na mão. O teclado ocupa parte do ecrã, o dedo precisa de espaço para tocar e um elemento que parecia bem colocado no computador pode tornar-se incómodo durante a utilização.

Para testar um site no telemóvel não precisamos de transformar o projeto numa aplicação Android, criar um APK ou preparar um emulador. Basta disponibilizar o servidor de desenvolvimento de uma forma a que o browser do telemóvel lhe consiga chegar.

E o teste pode incluir outras pessoas. Um colega, amigo ou cliente pode abrir o site no próprio telemóvel e encontrar dificuldades que nos passam despercebidas depois de horas a olhar para o mesmo ecrã.

Podemos fazer isto de duas formas muito simples: pela mesma rede Wi-Fi ou através de um túnel, quando queremos testar por dados móveis ou partilhar o projeto com alguém que está noutro local. Neste artigo vamos experimentar ambas.

Porque não basta abrir o mesmo endereço?

No computador, o site pode estar disponível em http://localhost:5173 ou http://localhost:8000.

O detalhe é que localhost aponta para o dispositivo onde estamos a usar esse endereço. No computador, refere-se ao computador. No telemóvel, refere-se ao próprio telemóvel.

Por isso, precisamos de um endereço que permita ao telemóvel chegar ao site que está a correr no computador. Um túnel resolve essa ligação: recebemos um endereço HTTPS que podemos abrir no browser do telemóvel, e os pedidos são encaminhados para o nosso servidor local.

O que precisamos para usar o Cloudflare?

O computador precisa de ter o site a correr e o programa cloudflared disponível. No telemóvel basta um browser e acesso à Internet.

Este método permite testar o site no browser do telemóvel, sem instalar o Android Studio, configurar emuladores ou criar um APK. Com o site a correr no computador, precisamos apenas de acrescentar a ferramenta cloudflared, que estabelece o túnel. Se ainda não estiver instalada, podemos obtê-la na página oficial de downloads. É uma ferramenta de linha de comandos e não exige preparar um ambiente Android.

O modo que vamos usar chama-se Quick Tunnel. Cria um endereço temporário em trycloudflare.com e não exige conta Cloudflare nem domínio próprio. Destina-se a testes durante o desenvolvimento e não deve ser usado em produção.

Outra vantagem é não precisar de abrir portas de entrada no computador nem configurar encaminhamento de portas no router. O cloudflared estabelece uma ligação de saída até à Cloudflare, que encaminha os pedidos para o nosso servidor local.

Por defeito, quem conhecer o endereço do Quick Tunnel consegue abrir o site. Atualmente também podemos restringir o acesso por email, fazendo com que o visitante receba um código temporário antes de entrar. Veremos essa opção mais à frente.

A documentação da Cloudflare descreve o funcionamento e as limitações dos Quick Tunnels.

React com Vite: passo a passo

Num projeto Vite há um detalhe adicional: o servidor valida o hostname usado no pedido. Como o Quick Tunnel cria um endereço trycloudflare.com, precisamos de autorizar esse hostname.

A opção mais restrita é autorizar apenas o hostname concreto criado para aquela sessão, em vez de permitir todos os subdomínios de trycloudflare.com.

1. Iniciar o Vite

Na pasta do projeto, abrir um terminal e executar:

npm run dev

Confirmar a porta apresentada. Num projeto Vite é frequente ser 5173.

2. Criar o Quick Tunnel

Num segundo terminal:

cloudflared tunnel --url http://localhost:5173

Ajustar a porta se o Vite estiver a usar outra.

O Cloudflare apresenta um endereço semelhante a:

https://exemplo-aleatorio.trycloudflare.com

O hostname muda quando criamos um novo Quick Tunnel.

3. Autorizar o hostname no Vite

Copiar apenas o hostname gerado, sem https://, e acrescentá-lo ao vite.config.ts ou vite.config.js, dentro da configuração existente:

server: {
  allowedHosts: ['exemplo-aleatorio.trycloudflare.com'],
}

Se já existir um bloco server, acrescentar apenas allowedHosts, mantendo as restantes opções.

Depois de guardar o ficheiro, reiniciar o Vite:

Ctrl+C
npm run dev

O túnel pode continuar aberto enquanto reiniciamos o servidor local.

Poderíamos usar .trycloudflare.com para aceitar qualquer subdomínio desse domínio, mas o próprio Vite recomenda autorizar hosts explícitos sempre que possível. Como não controlamos o domínio trycloudflare.com, prefiro a opção mais restrita, mesmo que implique atualizar o hostname quando criamos um novo Quick Tunnel.

A documentação do Vite explica esta validação e alerta para os riscos de configurações demasiado permissivas.

4. Abrir no telemóvel e experimentar

Abrir no browser do telemóvel o endereço HTTPS fornecido pelo Cloudflare.

O acesso pode ser feito por Wi-Fi ou dados móveis. Enquanto testamos, o computador, o Vite e o cloudflared precisam de continuar ativos. Quando terminamos o processo cloudflared, aquele endereço deixa de funcionar.

Podemos continuar a editar os ficheiros no computador. Depois de guardar uma alteração, o Vite continua a tratar do desenvolvimento normalmente; no telemóvel podemos atualizar a página quando necessário.

Partilhar o teste com outras pessoas

Uma forma que utilizo é enviar o endereço do túnel por WhatsApp, numa conversa individual com a pessoa que vai testar. É rápido: copio o link apresentado no terminal, envio-o e a pessoa abre o site no browser do seu telemóvel. Não precisa de instalar uma aplicação nem de estar na minha rede Wi-Fi.

Podemos pedir-lhe que complete uma tarefa concreta, como encontrar uma informação ou preencher um formulário, e que nos diga onde hesitou. Isso ajuda-nos a avaliar o design, o toque e a navegação com outros ecrãs e hábitos de utilização.

Enviar o link numa conversa individual permite escolher com quem o partilhamos, mas um Quick Tunnel público não fica tecnicamente limitado a essa pessoa. Quem tiver o endereço pode abri-lo.

Se quisermos restringir o acesso a um endereço de email específico, podemos iniciar o túnel assim:

cloudflared tunnel --url http://localhost:5173 --allowed-mail pessoa@exemplo.com

O visitante introduz o email e recebe um código de utilização única. Não precisa de ter uma conta Cloudflare.

Para vários destinatários podemos repetir --allowed-mail ou indicar uma lista. Esta funcionalidade exige uma versão atual do cloudflared.

Quando o teste terminar, parar o túnel com Ctrl+C no respetivo terminal.

HTML, CSS e JavaScript: usar Python para servir o site

Num site feito com HTML, CSS e JavaScript, precisamos primeiro de disponibilizar os ficheiros através de um servidor HTTP. Se já temos Python instalado, conseguimos fazê-lo com um comando.

1. Abrir um terminal na pasta do site

Escolher a pasta que contém o index.html e os restantes ficheiros do site. Depois executar:

python -m http.server 8000 --bind 127.0.0.1

O Python passa a servir os ficheiros dessa pasta. Abrir http://127.0.0.1:8000 no computador para confirmar que a página, os estilos e os scripts carregam.

2. Ligar o túnel ao servidor Python

Num segundo terminal, executar:

cloudflared tunnel --url http://127.0.0.1:8000

Copiar o endereço HTTPS apresentado e abri-lo no telemóvel. Manter os dois terminais ativos durante o teste.

Neste caso não há configuração do Vite para alterar. O Python disponibiliza os ficheiros e o Cloudflare cria o acesso até eles. Depois de editar e guardar os ficheiros, atualizar a página no telemóvel para ver as alterações.

Este servidor simples é adequado para testes de ficheiros estáticos; não executa PHP nem substitui um servidor de produção. A própria documentação do Python avisa que http.server implementa apenas verificações básicas de segurança. A documentação do Python descreve o comando e as opções disponíveis.

E se já estiver a usar outro servidor?

Podemos aproveitar o servidor que já temos. Por exemplo, se o site estiver aberto com o Live Server na porta 5500, o comando do túnel será:

cloudflared tunnel --url http://localhost:5500

A porta deve corresponder à que aparece no endereço do site. O túnel liga-se ao servidor; não depende de o site ter sido criado em React ou apenas com HTML, CSS e JavaScript.

Uma alternativa sem túnel: a mesma rede Wi-Fi

Se o computador e o telemóvel estiverem na mesma rede Wi-Fi, podemos abrir o site pelo IP do computador. É uma boa primeira escolha quando queremos testar no nosso próprio telemóvel, sem instalar outra ferramenta de túnel.

Num projeto com Vite

Iniciar o servidor com:

npm run dev -- --host 0.0.0.0

No telemóvel, abrir o endereço Network apresentado pelo Vite. Pode ser algo como http://192.168.1.75:5173, mas devemos usar o endereço indicado no nosso terminal.

Num site HTML com Python

Iniciar o servidor com acesso pela rede:

python -m http.server 8000 --bind 0.0.0.0

Depois, abrir no telemóvel o IP do computador seguido da porta: por exemplo, http://192.168.1.75:8000. No Windows, podemos consultar o IP com ipconfig, procurando o endereço IPv4 da ligação Wi-Fi.

0.0.0.0 é uma opção de escuta do servidor, não o endereço a escrever no telemóvel. A firewall deve permitir a ligação nessa rede, e algumas redes Wi-Fi impedem a comunicação entre dispositivos.

Esta alternativa aproveita as ferramentas já disponíveis: Vite num projeto React ou Python, se estiver instalado. O acesso funciona dentro da rede local. Para abrir o site por dados móveis ou partilhá-lo com alguém noutro local, um túnel é mais indicado.

Antes de partilhar: estamos a expor o nosso servidor de desenvolvimento

Um túnel público torna o serviço local acessível através da Internet. Isso é precisamente o que queremos para testar — mas convém não esquecer o outro lado da moeda.

Antes de partilhar o endereço:

confirmar que não existem páginas administrativas abertas sem proteção;
evitar expor dados reais ou informação sensível;
não deixar credenciais ou segredos visíveis na interface;
usar autenticação por email quando o teste deve ficar limitado a determinadas pessoas;
terminar o túnel quando o teste acabar.

Um Quick Tunnel é uma ferramenta de desenvolvimento, não um substituto para publicar uma aplicação em produção.

E se quisermos manter o mesmo endereço?

Para um acesso mais frequente, podemos criar um túnel gerido no painel da Cloudflare e associá-lo a um domínio nosso. Este caminho envolve uma conta, um domínio configurado na Cloudflare e a ligação do cloudflared ao túnel.

Os Quick Tunnels não têm garantia de disponibilidade, têm limites próprios e o hostname muda quando o processo é reiniciado. São excelentes para testes rápidos; para um endereço estável e utilização continuada, faz mais sentido passar para um túnel gerido.

O guia oficial para criar um túnel pelo painel da Cloudflare explica os passos. É uma opção para quando queremos reutilizar o mesmo endereço; o computador e o servidor local continuam a precisar de estar ativos.

Outros métodos que também podemos usar

Há outras ferramentas para criar um endereço público. Convém escolher tendo em conta o que já está instalado e o tipo de teste que queremos fazer.

Localtunnel: se já temos Node.js e npm, podemos executar:

npx localtunnel --port 8000

O comando obtém um endereço público para o servidor nessa porta. O npx pode descarregar o pacote na primeira execução, por isso não significa ausência total de downloads. Os exemplos estão no repositório oficial.

ngrok: depois de instalar a ferramenta e configurar a conta e o token, podemos usar:

ngrok http 8000

Também fornece acesso ao servidor local e inclui ferramentas de inspeção dos pedidos. A preparação está descrita no guia oficial, e a inspeção na visão geral do serviço. Pode ser útil quando, além de ver o site, queremos analisar as comunicações com o servidor.

Publicar uma versão de teste: serviços como o GitHub Pages permitem disponibilizar sites estáticos. O site continua acessível com o computador desligado, mas é necessário voltar a publicar as alterações. Para React, publicamos os ficheiros gerados pelo build, com a configuração adequada ao alojamento.

O que queremos fazer	Método a considerar
Testar no nosso telemóvel, na mesma rede	Acesso pelo IP do computador
Testar por dados móveis ou enviar um link a outras pessoas, por exemplo via WhatsApp	Cloudflare Quick Tunnel
Criar um túnel usando Node.js e npm	Localtunnel
Criar um túnel e inspecionar pedidos	ngrok
Manter uma versão estática disponível com o computador desligado	Publicação num alojamento como GitHub Pages

O teste que interessa fazer

Conseguir abrir a página é o primeiro passo. Depois, vale a pena usar o site como uma pessoa o usaria:

Abrir e fechar os menus com o dedo.
Experimentar os botões, sobretudo os que ficam próximos uns dos outros.
Preencher formulários e observar o espaço ocupado pelo teclado.
Percorrer páginas compridas e verificar se algum elemento dificulta a navegação.
Rodar o telemóvel e ver como o design se adapta.
Completar uma tarefa, do início ao fim.

É aqui que aparecem os pequenos detalhes: um botão difícil de tocar, um campo tapado pelo teclado ou um menu que ocupa demasiado espaço. São coisas que podemos corrigir enquanto o site ainda está em desenvolvimento — precisamente quando são mais baratas de corrigir.

Não precisamos de preparar um ambiente móvel completo para testar um site no telemóvel. Se os dois dispositivos estão na mesma rede, o IP local pode ser suficiente. Se queremos usar dados móveis ou entregar um link a outra pessoa, um Quick Tunnel resolve o problema em poucos minutos.

No fim, a ferramenta é a parte menos importante. O que interessa é sair do confortável ecrã do computador e descobrir como o site se comporta onde provavelmente vai ser usado: na mão de alguém.