Come funziona l'Anteprima di un'applicazione in funzione
Il tunnel verso localhost, le porte consentite, gli obiettivi con un nome e cosa fare quando nell'Anteprima c'è una vecchia versione della pagina.
L'Anteprima apre sul telefono l'applicazione che gira sul tuo computer su localhost. Non una copia, non uno screenshot: quell'applicazione in funzione. L'Agente cambia qualcosa, tocchi ricarica e lo vedi.
Come i dati arrivano lì
Il browser dell'applicazione parla con il localhost del telefono, e il Server dall'altra parte apre una connessione TCP verso localhost:port da sé. In mezzo c'è lo stesso canale cifrato attraverso cui passa tutto il resto.
Nel tunnel non viene riscritto niente: né le intestazioni né il contenuto. Grazie a questo funzionano anche i WebSocket, così un server di sviluppo con ricarica a caldo si comporta come sul computer.
Niente viene pubblicato in nessun posto. Un'applicazione su localhost resta su localhost; il tunnel esiste solo mentre l'Anteprima è aperta.
Porte consentite
Il Server fa passare solo le porte degli intervalli consentiti. Per impostazione predefinita sono:
3000–3999, 4000–4999, 5173, 8000–8999Lì ci stanno i soliti server di sviluppo, e non ci stanno né i database né SSH. Si può cambiare nella configurazione del Server:
{
"allowed_ports": [{ "from": 3000, "to": 3999 }, { "from": 9000, "to": 9000 }]
}Un tentativo su una porta fuori intervallo viene scritto nel registro del Server. È l'unica traccia del fatto che il telefono ha provato ad arrivare dove non deve.
Obiettivi con un nome — e perché convengono
Nella configurazione del Server si possono nominare applicazioni intere, cioè non una porta ma un gruppo:
{
"preview_targets": [
{ "name": "jobino", "port": 3000, "extra_ports": [8000] }
]
}Nell'Anteprima compaiono poi come un pulsante sotto «Dalla configurazione del Server» e si aprono tutte le loro porte in una volta.
È la soluzione più frequente di un problema che sembra un'applicazione rotta: la pagina si carica, ma l'accesso o il caricamento dei dati fallisce. Il frontend gira su 3000, l'API su 8000, e quando è aperta solo la 3000 le richieste all'API dal telefono non portano da nessuna parte. Un obiettivo con un nome apre entrambe.
Un obiettivo con una porta fuori dagli intervalli consentiti il Server lo rifiuta già all'avvio. Se lo lasciasse passare, l'Anteprima si aprirebbe e fallirebbe soltanto la richiesta all'API, e la si cercherebbe nell'applicazione, non nel file in cui sta davvero.
Una vecchia versione della pagina
La confusione più frequente: l'Agente segnala che è pronto, ma nell'Anteprima c'è ancora il vecchio. Di solito la colpa è di una di queste tre cose, in quest'ordine:
- Il browser tiene la pagina caricata
- Tocca ricarica nella barra dell'Anteprima. Non è un reload ordinario: si carica una finestra nuova, così non viene usato niente di quello che il browser ha messo da parte. È fatto così proprio per questo: lo premi nel momento in cui hai cambiato il codice, e vuoi vedere quello nuovo.
- Il server di sviluppo sul computer non si è ricaricato
- Se l'Agente ha cambiato qualcosa che non viene ripreso a caldo — la configurazione, le dipendenze, la build — ricaricare sul telefono non aiuta, perché sul computer gira ancora il vecchio processo. Fai riavviare quel server all'Agente.
- Il tunnel è appeso a una vecchia connessione
- Chiudi l'Anteprima e riaprila. Nasce una nuova connessione a localhost: è il passo che aiuta quando il server di sviluppo si è riavviato nel frattempo e la vecchia connessione è rimasta appesa.
Quando neanche questo aiuta, la cosa sta quasi sempre nel computer, non nel telefono. La verifica più rapida è aprire quell'indirizzo nel browser sul computer.
Altre cose che si confondono
- Sulla porta non ascolta niente
- L'applicazione sul computer non gira, oppure gira su un'altra porta. L'errore l'Anteprima lo mostra come un avviso con la possibilità di riprovare, non come una pagina d'errore del browser.
- Ascolta, ma solo su IPv6
- Vite per impostazione predefinita si lega a
[::1]. Il Server prova entrambe le famiglie di indirizzi, quindi questo funziona; e se comunque fallisce, nell'avviso si vede quale indirizzo ha rifiutato. - Una schermata bianca senza errore
- Di solito una richiesta a un'altra porta, che dal telefono non porta da nessuna parte. L'Anteprima intercetta queste richieste e te lo dice, ma la soluzione è un obiettivo con un nome con tutte le porte, vedi sopra.
- L'applicazione registra un service worker
- Il browser sul telefono non supporta i service worker su HTTP. L'Anteprima infila al loro posto un sostituto inerte, così l'applicazione non va giù, ma la modalità offline nell'Anteprima non funziona e non deve funzionare.
- Un layout rotto
- Passa la larghezza a «Computer». Un'applicazione scritta per il desktop si comporta diversamente alla larghezza di un telefono, e non è colpa dell'Anteprima.
Si è inceppato da qualche altra parte rispetto a quanto c'è qui? Scrivi a support@coden-app.com.