První projekt · 02

Živý náhled

Jakmile Claude začne aplikaci stavět, nemusíte čekat na její dokončení, abyste viděli výsledek. Tahle kapitola vysvětluje, jak živý náhled funguje a proč ho vidíte jen vy.

Dev server

Aby bylo rozpracovanou aplikaci vůbec vidět, musí běžet takzvaný dev server — program, který kód aplikace obsluhuje a posílá jeho aktuální podobu do prohlížeče. Spouští ho příkaz pnpm dev, ale nemusíte ho psát sami — spustí ho za vás Claude, jakmile projekt vytvoří nebo když ho o náhled požádáte.

Terminál

$ pnpm dev VITE v5.4.11 ready in 412 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help

Adresa http://localhost:5173 je pak živý náhled aplikace přímo na vašem počítači. Součástí dev serveru je i hot reload — jakmile Claude uloží změnu v kódu, náhled v prohlížeči se sám obnoví, bez ručního klikání na „reload“.

Dva druhy náhledu

Aplikaci si můžete prohlédnout dvěma způsoby — hodí se oba, každý pro jinou chvíli.

Artefakt v okně Claude

Rychlý náhled přímo v okně Claude Desktop, bez přepínání aplikací — ideální na první pohled, jak aplikace vypadá po menší úpravě.

Plný náhled v prohlížeči

Otevření adresy http://localhost:5173 v běžném prohlížeči ukáže skutečné chování aplikace — doporučujeme ho vždy před nasazením (deployem).

Screenshot SC-10 Artefakt / náhled aplikace přímo v okně Claude Desktop.

Hezčí adresa přes Caddy

Adresa localhost:5173 je praktická, ale nic neříkající — a pokud běží víc aplikací najednou, číslo za dvojtečkou (port) se pro každou liší. Caddy tohle řeší: dá náhledu hezčí adresu, podobnou té, na které aplikace jednou poběží na webu.

Stačí mít ve složce projektu soubor Caddyfile s tímto obsahem:

Caddyfile

kalkulacka.localhost { reverse_proxy 127.0.0.1:5173 }

O vytvoření souboru i spuštění Caddy požádáte Claude:

Nastav mi Caddy, ať náhled běží na kalkulacka.localhost.

Claude ve složce s Caddyfile spustí příkaz caddy run — sám, nemusíte nic psát do terminálu. Po chvíli je náhled dostupný na adrese http://kalkulacka.localhost.

Screenshot SC-11 Aplikace v prohlížeči na adrese kalkulacka.localhost.

Náhled vidíte jen vy

Ať už používáte artefakt v Claude, adresu localhost:5173, nebo hezčí kalkulacka.localhost přes Caddy — pořád jde jen o náhled na vašem počítači, který vidíte jenom vy (a Claude). Aby aplikaci viděli i kolegové, musí projít nasazením (deployem) — víc o rozdílu mezi localhost a internetem najdete v kapitole Od kódu k webu.