Live Dev - vedi ogni salvataggio sul tuo telefono

1Cos'è Live Dev#

Live Dev crea un'APP DI SVILUPPO per il tuo telefono. Invece di inserire i tuoi file nell'APK, l'app li carica dal server di sviluppo in esecuzione sul tuo PC: ogni volta che salvi un file, la modifica compare sul telefono. Nessuna nuova build, nessuna reinstallazione, nessun ZIP da copiare.

ГЁ la vera shell di AppMint, non una scheda del browser: fotocamera, posizione, notifiche, annunci, il pulsante indietro, il menu laterale e ogni bridge di AppMint si comportano esattamente come nella tua app finita.

La crei una volta sola. Dopo, torni su AppMint solo quando cambi qualcosa di nativo: un'autorizzazione, l'icona, la splash, gli ID degli annunci.

2Crea l'app di sviluppo (una volta)#

1. Nella schermata iniziale tocca 'Live Dev' (oppure Create APK → il riquadro 'Live Dev').
2. Scegli la porta del tuo server di sviluppo. Un tocco per gli strumenti piГ№ comuni: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. Funziona qualsiasi porta da 1024 in su.
3. Facoltativo: una pagina iniziale come /admin/index.html e l'indirizzo del tuo PC. Lascia vuoto l'indirizzo: l'app trova da sola il tuo PC.
4. Dagli un nome del pacchetto che termini con .dev (ad esempio com.myshop.dev) così potrà convivere più tardi con la tua app vera.
5. Nel passaggio Accesso spunta le autorizzazioni che vuoi provare (fotocamera, posizione, notifiche…). Sono native, quindi vengono fissate al momento della build.
6. Compila e installa l'APK sul tuo telefono.

Una build Live Dev non produce mai un bundle Play (AAB): funziona solo accanto al tuo PC, quindi non va mai pubblicata.

3Avvia il tuo server di sviluppo in modo che il telefono possa raggiungerlo#

Per impostazione predefinita, la maggior parte dei server di sviluppo ascolta solo il PC stesso. Aggiungi l'opzione 'host' così gli altri dispositivi sul tuo Wi-Fi possono connettersi:

• 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: sono già in ascolto sulla rete

Hai solo una cartella di file HTML? Uno qualsiasi di questi la trasforma in un server: eseguilo dentro la cartella:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: installa 'Live Server', poi clicca su 'Go Live'

Windows chiede una volta se consentire il server attraverso il firewall: spunta 'Reti private' e consenti. Se hai cliccato Annulla, il telefono non potrà connettersi finché non consenti Node (o Python) in Sicurezza di Windows → Firewall → Consenti un'app.

npm run dev -- --host

4Connettiti via Wi-Fi: nessun cavo, nulla da installare#

1. Collega il telefono alla stessa rete Wi-Fi del PC.
2. Apri la tua app Live Dev.

Ecco tutto. L'app cerca il tuo server di sviluppo sulla porta che hai scelto, trova il tuo PC e carica la pagina. Ricorda il PC per la volta successiva. Se il tuo server ГЁ su un'altra porta, o rispondono piГ№ PC, li mostra e tu tocchi il tuo.

Non trovi nulla? La schermata di connessione riprova ogni due secondi e apre la pagina da sola appena il tuo server è raggiungibile: avvia il server e guarda. 'Find my PC' controlla anche le altre porte comuni. Puoi sempre scrivere in 'Enter it yourself' l'indirizzo che Vite stampa sotto 'Network:'.

Perché è meglio che digitare http://192.168.1.5:5173 in un'app di sito web: la pagina continua a girare come http://localhost:PORT sul telefono (l'app la instrada verso il tuo PC). localhost è un CONTESTO SICURO, quindi fotocamera, microfono, posizione, appunti, service worker e passkey funzionano. Su un normale indirizzo 192.168… il motore del browser li blocca tutti.

5Connettiti via USB: funziona anche senza Wi-Fi#

Usalo quando PC e telefono sono su reti diverse, su un Wi-Fi ospiti che impedisce ai dispositivi di vedersi, o senza alcuna rete.

1. Sul telefono: Impostazioni в†’ Info sul telefono в†’ tocca sette volte 'Numero build', poi Opzioni sviluppatore в†’ attiva 'Debug USB'.
2. Collega il telefono al PC e accetta la richiesta 'Consenti debug USB'.
3. Sul PC esegui il comando qui sotto (usa la tua porta). adb è incluso in Android Studio, oppure scarica 'SDK Platform-Tools' da Google: è un piccolo ZIP.
4. Apri la tua app Live Dev. Rileva il collegamento USB e lo usa prima di provare il Wi-Fi.

Esegui di nuovo il comando dopo aver scollegato il cavo o riavviato il telefono. Con l'USB NON serve l'opzione 'host' del passaggio 3.

Se la schermata di connessione dice 'USB link is up, but nothing answers on your PC's port', la parte del cavo funziona e il tuo server di sviluppo semplicemente non ГЁ in esecuzione.

adb reverse tcp:5173 tcp:5173

Scarica SDK Platform-Tools (adb) →

6Il pulsante DEV#

Un piccolo pulsante DEV fluttua sul bordo dell'app: trascinalo dove vuoi. Diventa rosso con un numero quando la tua pagina registra un errore. Toccalo per:

• Ricarica: scarica sempre una copia nuova di ogni file, mai una in cache.
• Console - tutto ciò che la tua pagina registra, errori e avvisi colorati, con il file e la riga (src/App.tsx:42). 'Errors' filtra, 'Copy' mette tutto il log negli appunti: incollalo in una chat o in una segnalazione di bug.
• Esegui JavaScript - una riga in fondo alla console. Scrivi qualsiasi espressione e vedi il risultato, direttamente sul telefono. Le promise vengono attese e registrate.
• Refresh on save - vedi il passaggio successivo.
• Cambia server: un altro PC o un'altra porta, senza ricreare l'app.
• Cancella i dati del sito e ricarica: elimina cookie, localStorage e IndexedDB per un test di primo avvio pulito.
• Informazioni sulla connessione: l'indirizzo, USB o Wi-Fi, e l'IP di questo telefono.

Per i DevTools completi (elementi, rete, breakpoint) collega il cavo, apri chrome://inspect in Chrome sul PC e scegli la tua app.

7Aggiornamento al salvataggio, anche per HTML semplice#

Vite, Next, Angular e webpack inviano da soli le tue modifiche alla pagina (hot reload). L'app lo rileva e non interferisce.

Una normale cartella servita da python, 'npx serve' o qualsiasi server statico non ha hot reload: di solito dovresti salvare e poi tirare per aggiornare, ogni singola volta. Live Dev lo fa per te: ricorda quali file ha caricato la pagina, chiede al tuo server una volta al secondo se qualcuno è cambiato e si aggiorna quando è successo. Un file .css modificato viene sostituito sul posto senza ricaricare, così mantieni la posizione di scorrimento e i dati dei moduli mentre rifinisci lo stile.

Nulla da installare sul PC. Disattivalo dal pulsante DEV se vuoi il controllo manuale. Lo schermo resta inoltre acceso mentre un'app Live Dev ГЁ aperta.

8Quando hai finito: crea l'app vera#

Un'app Live Dev funziona solo accanto al tuo PC: non darla mai agli utenti. Quando il progetto è pronto:

• Progetto con framework (Vite, React, Vue…): esegui 'npm run build', comprimi in uno ZIP la cartella dist (oppure comprimi l'intero progetto sorgente) e compilalo in Create APK → Offline ZIP.
• Cartella HTML semplice: comprimila in ZIP con index.html al livello principale в†’ Offline ZIP. Un solo file? Usa il riquadro HTML.
• Già pubblicato su un vero indirizzo https://: Create APK → Website.

Usa il tuo vero nome del pacchetto per quella build. Poiché il pacchetto dell'app di sviluppo termina con .dev, entrambe possono restare installate affiancate.

9Se non si connette#

• Wi-Fi: 'Waiting for your dev server' all'infinito → il server ascolta solo il PC. Riavvialo con l'opzione host del passaggio 3 (Vite stampa una riga 'Network:' quando è corretto).

• Wi-Fi: ancora niente → il firewall di Windows lo sta bloccando (passaggio 3), oppure il router isola i dispositivi (comune su Wi-Fi per ospiti, uffici e hotel). Usa l'USB, oppure attiva l'hotspot del telefono e collega il PC a quello.

• USB: 'adb' non viene riconosciuto в†’ installa Platform-Tools ed esegui il comando da quella cartella. 'no devices' в†’ accetta la richiesta di debug USB sul telefono, oppure prova un altro cavo (molti cavi servono solo per la ricarica).

• 'Port … is busy on this phone' → un'altra app sul telefono usa quella porta. Avvia il tuo server di sviluppo su un'altra porta e inseriscila in 'Enter it yourself'.

• Vite mostra 'Blocked request. This host is not allowed' → hai aperto l'indirizzo del PC in un normale browser o in un'app web. L'app Live Dev non lo causa mai, perché chiede sempre localhost.

• La pagina si carica ma le chiamate alle tue API falliscono в†’ l'elenco CORS del tuo backend deve consentire http://localhost:PORT (la maggior parte delle configurazioni di sviluppo lo fa giГ ), e un URL API scritto come http://localhost:4000 indica il TELEFONO. Inoltra anche quella porta (adb reverse tcp:4000 tcp:4000) oppure usa l'indirizzo del PC per l'API.

• Una pagina vuota dopo aver cambiato progetto sulla stessa porta в†’ DEV в†’ Cancella i dati del sito e ricarica (risponde un vecchio service worker).