Live Dev - veja cada salvamento no seu celular

1O que ĂŠ o Live Dev#

O Live Dev cria um APP DE DESENVOLVIMENTO para o seu prĂłprio celular. Em vez de empacotar seus arquivos dentro do APK, o app os carrega do servidor de desenvolvimento rodando no seu PC, entĂŁo toda vez que vocĂŞ salva um arquivo, a mudança aparece no celular. Sem recompilar, sem reinstalar, sem copiar ZIPs.

É o shell real do AppMint, não uma aba do navegador: câmera, localização, notificações, anúncios, o botão voltar, o menu lateral e todas as pontes do AppMint se comportam exatamente como no seu app finalizado.

Você compila uma vez. Depois disso, só volta ao AppMint quando mudar algo nativo - uma permissão, o ícone, a splash, os IDs de anúncios.

2Compile o app de desenvolvimento (uma vez)#

1. Na tela inicial, toque em 'Live Dev' (ou Criar APK → o bloco 'Live Dev').
2. Escolha a porta do seu servidor de desenvolvimento. Um toque para as ferramentas mais comuns: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. Qualquer porta a partir de 1024 funciona.
3. Opcional: uma pĂĄgina inicial como /admin/index.html e o endereço do seu PC. Deixe o endereço vazio: o app encontra seu PC sozinho.
4. DĂŞ a ele um nome de pacote terminado em .dev (por exemplo, com.myshop.dev) para que ele possa ficar ao lado do seu app de verdade depois.
5. Na etapa de Acesso, marque as permissĂľes que quer testar (câmera, localização, notificaçþes…). Elas sĂŁo nativas, entĂŁo ficam fixas na hora do build.
6. Compile e instale o APK no seu celular.

Um build do Live Dev nunca gera um pacote da Play (AAB): ele sĂł funciona junto do seu PC, entĂŁo nunca deve ser publicado.

3Inicie seu servidor de desenvolvimento para que o celular consiga acessá-lo#

Por padrĂŁo, a maioria dos servidores de desenvolvimento sĂł escuta o prĂłprio PC. Adicione a opção 'host' para que outros dispositivos da sua rede Wi-Fi possam se conectar:

• Vite (React, Vue, Svelte, Astro): npm run dev -- --host
• Next.js: npx next dev -H 0.0.0.0
• Angular: ng serve --host 0.0.0.0
• Create React App / Vue CLI: jĂĄ escutam na rede

Tem sĂł uma pasta de arquivos HTML? Qualquer um destes a transforma em um servidor: execute dentro da pasta:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: instale 'Live Server' e clique em 'Go Live'

O Windows pergunta uma vez se deve permitir o servidor pelo firewall: marque 'Redes privadas' e permita. Se vocĂŞ clicou em Cancelar, o celular nĂŁo consegue conectar atĂŠ vocĂŞ permitir o Node (ou o Python) em Segurança do Windows → Firewall → Permitir um app.

npm run dev -- --host

4Conecte pelo Wi-Fi - sem cabo, nada para instalar#

1. Coloque o celular na mesma rede Wi-Fi do PC.
2. Abra seu app Live Dev.

É só isso. O app procura seu servidor de desenvolvimento na porta que você escolheu, encontra seu PC e carrega a página. Ele lembra do PC para a próxima vez. Se seu servidor estiver em outra porta, ou se vários PCs responderem, ele os mostra e você toca no seu.

NĂŁo encontrou nada? A tela de conexĂŁo continua tentando a cada dois segundos e abre a pĂĄgina sozinha assim que seu servidor ficar acessĂvel: inicie o servidor e observe. 'Encontrar meu PC' tambĂŠm verifica as outras portas comuns. VocĂŞ sempre pode digitar em 'Digitar vocĂŞ mesmo' o endereço que o Vite mostra em 'Network:'.

Por que isso é melhor do que digitar http://192.168.1.5:5173 em um app de site: a página continua rodando como http://localhost:PORT no celular (o app faz um túnel até o seu PC). localhost é um CONTEXTO SEGURO, então câmera, microfone, localização, área de transferência, service workers e passkeys funcionam. Em um endereço 192.168… comum, o mecanismo do navegador bloqueia tudo isso.

5Conecte por USB - funciona sem nenhum Wi-Fi#

Use isto quando o PC e o celular estiverem em redes diferentes, em um Wi-Fi de visitantes que impede os dispositivos de se enxergarem, ou sem nenhuma rede.

1. No celular: Configurações → Sobre o telefone → toque sete vezes em 'Número da versão' e depois, em Opções do desenvolvedor → ative 'Depuração USB'.
2. Conecte o celular ao PC e aceite o aviso 'Permitir depuração USB'.
3. No PC, execute o comando abaixo (use sua porta). O adb vem com o Android Studio, ou baixe o 'SDK Platform-Tools' do Google: ĂŠ um ZIP pequeno.
4. Abra seu app Live Dev. Ele percebe a conexĂŁo USB e a usa antes de tentar o Wi-Fi.

Execute o comando novamente depois de desconectar o cabo ou reiniciar o celular. Com USB você NÃO precisa da opção 'host' da etapa 3.

Se a tela de conexão disser 'O link USB está ativo, mas nada responde na porta do seu PC' - a parte do cabo funciona e seu servidor de desenvolvimento simplesmente não está em execução.

adb reverse tcp:5173 tcp:5173

Baixar o SDK Platform-Tools (adb) →

6O botĂŁo DEV#

Um pequeno botão DEV flutua na borda do app - arraste-o para qualquer lugar. Ele fica vermelho com um número quando sua página registra um erro. Toque nele para:

• Recarregar - sempre busca uma cópia nova de cada arquivo, nunca uma em cache.
• Console - tudo o que sua pĂĄgina registra, com erros e avisos coloridos, com o arquivo e a linha (src/App.tsx:42). 'Erros' filtra, 'Copiar' coloca o log inteiro na ĂĄrea de transferĂŞncia: cole em um chat ou em um relatĂłrio de bug.
• Executar JavaScript - uma linha no fim do console. Digite qualquer expressĂŁo e veja o resultado, direto no celular. Promises sĂŁo aguardadas e registradas.
• Atualizar ao salvar - veja a prĂłxima etapa.
• Trocar servidor - outro PC ou outra porta, sem recompilar.
• Limpar dados do site e recarregar - apaga cookies, localStorage e IndexedDB para um teste limpo de primeira execução.
• Informações de conexão - o endereço, USB ou Wi-Fi e o IP deste celular.

Para as DevTools completas (elementos, rede, pontos de interrupção), conecte o cabo, abra chrome://inspect no Chrome do PC e escolha seu app.

7Atualizar ao salvar - atĂŠ para HTML simples#

Vite, Next, Angular e webpack enviam suas alterações para a página sozinhos (hot reload). O app detecta isso e não atrapalha.

Uma pasta simples servida por python, 'npx serve' ou qualquer servidor estĂĄtico nĂŁo tem hot reload: normalmente vocĂŞ salvaria e depois puxaria para atualizar, toda vez. O Live Dev faz isso por vocĂŞ: ele lembra quais arquivos a pĂĄgina carregou, pergunta ao seu servidor uma vez por segundo se algum mudou e atualiza quando isso acontece. Um arquivo .css alterado ĂŠ trocado no lugar, sem recarregar, entĂŁo vocĂŞ mantĂŠm a posição da rolagem e o que digitou nos formulĂĄrios enquanto estiliza.

Nada para instalar no PC. Desative pelo botão DEV se quiser controle manual. A tela também permanece ligada enquanto um app Live Dev estiver aberto.

8Quando terminar: compile o app de verdade#

Um app Live Dev sĂł funciona junto do seu PC; nunca o entregue aos usuĂĄrios. Quando o projeto estiver pronto:

• Projeto com framework (Vite, React, Vue…): execute 'npm run build', compacte a pasta dist em um ZIP (ou compacte o projeto-fonte inteiro) e compile em Criar APK → ZIP offline.
• Pasta HTML simples: compacte em ZIP com o index.html na raiz → ZIP offline. Só um arquivo? Use o bloco HTML.
• JĂĄ publicado em um endereço https:// de verdade: Criar APK → Site.

Use o nome de pacote real do seu app para esse build. Como o pacote do app de desenvolvimento termina em .dev, os dois podem ficar instalados lado a lado.

9Se nĂŁo conectar#

• Wi-Fi: 'Aguardando seu servidor de desenvolvimento' para sempre → o servidor sĂł escuta o prĂłprio PC. Reinicie-o com a opção de host da etapa 3 (o Vite mostra uma linha 'Network:' quando estĂĄ certo).

• Wi-Fi: ainda nada → o firewall do Windows estĂĄ bloqueando (etapa 3), ou o roteador isola os dispositivos (comum em redes Wi-Fi de visitantes, de escritĂłrios e de hotĂŠis). Use USB, ou ative o hotspot do celular e conecte o PC a ele.

• USB: 'adb' não é reconhecido → instale o Platform-Tools e execute o comando a partir dessa pasta. 'no devices' → aceite o aviso de depuração USB no celular ou tente outro cabo (muitos cabos servem só para carregar).

• 'A porta ⌠estĂĄ ocupada neste celular' → outro app do celular usa essa porta. Rode seu servidor de desenvolvimento em outra porta e digite-a em 'Digitar vocĂŞ mesmo'.

• O Vite mostra 'Blocked request. This host is not allowed' → vocĂŞ abriu o endereço do PC em um navegador comum ou em um app de site. O app Live Dev nunca causa isso, porque sempre pede localhost.

• A página carrega, mas suas chamadas de API falham → a lista de CORS do seu backend precisa permitir http://localhost:PORT (a maioria dos ambientes de desenvolvimento já permite), e uma URL de API escrita como http://localhost:4000 significa o CELULAR. Encaminhe essa porta também (adb reverse tcp:4000 tcp:4000) ou use o endereço do PC para a API.

• Uma página em branco depois de trocar de projeto na mesma porta → DEV → Limpar dados do site e recarregar (um service worker antigo está respondendo).