Jak funguje Náhled běžící aplikace

Tunel na localhost, povolené porty, pojmenované cíle a co dělat, když je v Náhledu stará verze webu.

8 minut Aktualizováno 2026-09-13

Náhled otevře v telefonu aplikaci, která běží na vašem počítači na localhostu. Ne kopii, ne screenshot — tu běžící aplikaci. Agent něco změní, ťuknete na obnovení a vidíte to.

Jak se tam data dostanou

Prohlížeč v aplikaci mluví s telefonním localhostem a Server na druhé straně otevře TCP spojení na localhost:port u sebe. Mezi tím je ten samý šifrovaný kanál, kterým jde všechno ostatní.

V tunelu se nic nepřepisuje — ani hlavičky, ani obsah. Díky tomu fungují i WebSockety, takže vývojový server s horkým přenačtením se chová jako na počítači.

Nikam se nic nezveřejňuje. Aplikace na localhostu zůstane na localhostu; tunel existuje jen po dobu, co je Náhled otevřený.

Povolené porty

Server pustí jen porty z povolených rozsahů. Ve výchozím nastavení jsou to:

3000–3999, 4000–4999, 5173, 8000–8999

Tam se vejdou obvyklé vývojové servery a nevejde se do nich databáze ani SSH. Změnit se to dá v konfiguraci Serveru:

{
  "allowed_ports": [{ "from": 3000, "to": 3999 }, { "from": 9000, "to": 9000 }]
}

Pokus o port mimo rozsah se zapíše do logu Serveru. Je to jediná stopa, že se telefon pokusil dostat někam, kam nemá.

Pojmenované cíle — a proč se vyplatí

Do konfigurace Serveru se dají pojmenovat celé aplikace, tedy ne jeden port, ale skupina:

{
  "preview_targets": [
    { "name": "jobino", "port": 3000, "extra_ports": [8000] }
  ]
}

V Náhledu se pak objeví jako tlačítko pod „Z konfigurace Serveru“ a otevřou se všechny jejich porty zaráz.

To je nejčastější řešení problému, který vypadá jako rozbitá aplikace: web se načte, ale přihlášení nebo načítání dat spadne. Frontend běží na 3000, API na 8000 — a když je otevřený jen 3000, dotazy na API z telefonu nevedou nikam. Pojmenovaný cíl otevře obojí.

Cíl s portem mimo povolené rozsahy Server odmítne hned při startu. Kdyby ho pustil, Náhled by se otevřel a selhal by až dotaz na API — a hledalo by se to v aplikaci, ne v souboru, kde to opravdu je.

Stará verze webu

Nejčastější zmatek: Agent hlásí, že je hotovo, ale v Náhledu je pořád to staré. Obvykle za to může jedna z těchto tří věcí — v tomhle pořadí:

Prohlížeč drží načtenou stránku

Ťukněte na obnovení v liště Náhledu. Není to obyčejný reload — načte se nové okno, takže se nepoužije nic, co si prohlížeč schoval. Přesně proto je to udělané takhle: mačkáte to ve chvíli, kdy jste změnili kód, a chcete vidět nový.

Vývojový server na počítači se nepřenačetl

Když Agent změnil něco, co se za běhu nepřebírá — konfiguraci, závislosti, build — obnovení v telefonu nepomůže, protože na počítači běží pořád starý proces. Nechte Agenta ten server restartovat.

Tunel visí na starém spojení

Zavřete Náhled a otevřete ho znovu. Vznikne nové spojení na localhost — to je ten krok, který zabere, když se vývojový server mezitím restartoval a staré spojení zůstalo viset.

Když ani to nepomůže, je to skoro vždycky na počítači, ne v telefonu. Nejrychlejší ověření je otevřít si tu adresu v prohlížeči na počítači.

Další věci, které se pletou

Na portu nic neposlouchá

Aplikace na počítači neběží, nebo běží na jiném portu. Chybu Náhled ukáže jako hlášení s možností to zkusit znovu, ne jako chybovou stránku prohlížeče.

Poslouchá, ale jen na IPv6

Vite se ve výchozím nastavení váže na [::1]. Server zkouší obě rodiny adres, takže tohle funguje — a když přece jen selže, v hlášení je vidět, která adresa odmítla.

Bílá obrazovka bez chyby

Většinou dotaz na jiný port, který z telefonu nevede nikam. Náhled takové dotazy odchytává a řekne o nich — ale řešení je pojmenovaný cíl se všemi porty, viz výše.

Aplikace registruje service worker

Prohlížeč v telefonu service workery přes HTTP nepodporuje. Náhled místo nich podstrčí nečinnou napodobeninu, aby aplikace nespadla — ale offline režim v Náhledu nefunguje a fungovat nemá.

Rozbitý layout

Přepněte šířku na „Počítač“. Aplikace napsaná pro desktop se v telefonní šířce chová jinak a není to chyba Náhledu.

Zaseklo se to jinde, než co je tady? Napište na support@coden-app.com.