Ako funguje Náhľad bežiacej aplikácie
Tunel na localhost, povolené porty, pomenované ciele a čo robiť, keď je v Náhľade stará verzia webu.
Náhľad otvorí v telefóne aplikáciu, ktorá beží na vašom počítači na localhoste. Nie kópiu, nie screenshot — tú bežiacu aplikáciu. Agent niečo zmení, ťuknete na obnovenie a vidíte to.
Ako sa tam dáta dostanú
Prehliadač v aplikácii hovorí s telefónnym localhostom a Server na druhej strane otvorí TCP spojenie na localhost:port u seba. Medzi tým je ten istý šifrovaný kanál, ktorým ide všetko ostatné.
V tuneli sa nič neprepisuje — ani hlavičky, ani obsah. Vďaka tomu fungujú aj WebSockety, takže vývojový server s horúcim prenačítaním sa chová ako na počítači.
Nikam sa nič nezverejňuje. Aplikácia na localhoste zostane na localhoste; tunel existuje len po dobu, čo je Náhľad otvorený.
Povolené porty
Server pustí len porty z povolených rozsahov. V predvolenom nastavení sú to:
3000–3999, 4000–4999, 5173, 8000–8999Tam sa zmestia obvyklé vývojové servery a nezmestí sa do nich databáza ani SSH. Zmeniť sa to dá v konfigurácii Servera:
{
"allowed_ports": [{ "from": 3000, "to": 3999 }, { "from": 9000, "to": 9000 }]
}Pokus o port mimo rozsahu sa zapíše do logu Servera. Je to jediná stopa, že sa telefón pokúsil dostať niekam, kam nemá.
Pomenované ciele — a prečo sa vyplatia
Do konfigurácie Servera sa dajú pomenovať celé aplikácie, teda nie jeden port, ale skupina:
{
"preview_targets": [
{ "name": "jobino", "port": 3000, "extra_ports": [8000] }
]
}V Náhľade sa potom objavia ako tlačidlo pod „Z konfigurácie Servera“ a otvoria sa všetky ich porty zaraz.
To je najčastejšie riešenie problému, ktorý vyzerá ako rozbitá aplikácia: web sa načíta, ale prihlásenie alebo načítanie dát spadne. Frontend beží na 3000, API na 8000 — a keď je otvorený len 3000, dotazy na API z telefónu nevedú nikam. Pomenovaný cieľ otvorí oboje.
Cieľ s portom mimo povolené rozsahy Server odmietne hneď pri štarte. Keby ho pustil, Náhľad by sa otvoril a zlyhal by až dotaz na API — a hľadalo by sa to v aplikácii, nie v súbore, kde to naozaj je.
Stará verzia webu
Najčastejší zmätok: Agent hlási, že je hotovo, ale v Náhľade je stále to staré. Obvykle za to môže jedna z týchto troch vecí — v tomto poradí:
- Prehliadač drží načítanú stránku
- Ťuknite na obnovenie v lište Náhľadu. Nie je to obyčajný reload — načíta sa nové okno, takže sa nepoužije nič, čo si prehliadač schoval. Presne preto je to urobené takto: stláčate to vo chvíli, keď ste zmenili kód, a chcete vidieť nový.
- Vývojový server na počítači sa neprenačítal
- Keď Agent zmenil niečo, čo sa za behu nepreberá — konfiguráciu, závislosti, build — obnovenie v telefóne nepomôže, pretože na počítači beží stále starý proces. Nechajte Agenta ten server reštartovať.
- Tunel visí na starom spojení
- Zavrite Náhľad a otvorte ho znova. Vznikne nové spojenie na localhost — to je ten krok, ktorý zaberie, keď sa vývojový server medzitým reštartoval a staré spojenie zostalo visieť.
Keď ani to nepomôže, je to takmer vždy na počítači, nie v telefóne. Najrýchlejšie overenie je otvoriť si tú adresu v prehliadači na počítači.
Ďalšie veci, ktoré sa plietajú
- Na porte nič nepočúva
- Aplikácia na počítači nebeží, alebo beží na inom porte. Chybu Náhľad ukáže ako hlásenie s možnosťou skúsiť to znova, nie ako chybovú stránku prehliadača.
- Počúva, ale len na IPv6
- Vite sa v predvolenom nastavení viaže na
[::1]. Server skúša obe rodiny adries, takže toto funguje — a keď aj tak zlyhá, v hlásení je vidieť, ktorá adresa odmietla. - Biela obrazovka bez chyby
- Väčšinou dotaz na iný port, ktorý z telefónu nevedie nikam. Náhľad také dotazy odchytáva a povie o nich — ale riešením je pomenovaný cieľ so všetkými portami, viď vyššie.
- Aplikácia registruje service worker
- Prehliadač v telefóne service workery cez HTTP nepodporuje. Náhľad namiesto nich podstrčí nečinnú napodobeninu, aby aplikácia nespadla — ale offline režim v Náhľade nefunguje a fungovať nemá.
- Rozbitý layout
- Prepnite šírku na „Počítač“. Aplikácia napísaná pre desktop sa v telefónnej šírke chová inak a nie je to chyba Náhľadu.
Zaseklo sa to inde, než čo je tu? Napíšte na support@coden-app.com.