Poslední krok cesty
Aplikace běží u tebe na localhostu. Poslední dovednost Mistrza: dostat ji ven, na opravdové adresy. Frontend a backend se nasazují každý zvlášť – přesně proto jsme je stavěli oddělené.
Nasazení frontendu (React)
Vite umí z tvé aplikace vyrobit hotové soubory příkazem:
npm run buildVznikne složka dist/ – obyčejné HTML, CSS a JavaScript. A ty už víš, kam s nimi: je to statický web jako z Poziomy 1!
- GitHub Pages – nahraješ obsah
dist/do repozitáře, jak umíš z Poziomy 1. - Nebo pohodlněji Netlify / Vercel – zadarmo, propojíš s GitHub účtem a nasazují samy při každé změně. S rodičem si jednu z nich vyzkoušejte; průvodce tě povede, celé je to na pár kliknutí.
Nasazení backendu (Node.js)
Server potřebuje počítač, který pořád běží. Na to jsou služby jako Render nebo Railway – mají bezplatné programy, které na školní projekt stačí:
-
Nahraj složku
muj-serverdo vlastního repozitáře na GitHubu (beznode_modules– ta se instaluje na serveru sama). -
Na render.com (s rodičem) zvol New → Web Service, propoj GitHub repozitář a nastav: Build Command
npm install, Start Commandnode server.js. -
Render ti dá adresu typu
https://muj-server.onrender.com. Vyzkoušej v prohlížeči.../api/vzkazy– tvoje API žije na internetu! -
Poslední detail: ve frontendu vyměň všechna
http://localhost:3900za novou adresu serveru a nasaď frontend znovu.
Než pustíš návštěvní knihu do světa, mysli jako strážce: na internetu ji najde kdokoli. Nech si kontroly délky vzkazu na serveru (máš je z minulé lekce!), nikdy nezobrazuj vzkazy jako HTML (React tě před tím chrání sám – další důvod, proč ho používat) a s rodičem se domluvte, že knihu občas zkontrolujete. Velké weby na tohle mají celé týmy – říká se tomu moderování.
🏆 Gratuluju, Mistře!
Zastav se na chvíli a podívej se, odkud jsi přišel/přišla:
- Úroveň 1: prázdný soubor →
<h1>Funguje to!</h1>→ celý web z HTML a CSS na GitHub Pages. - Úroveň 2: proměnné, podmínky, funkce → tmavý režim, galerie, kvíz, formulář.
- Úroveň 3: terminál, Node.js, React, komponenty, state, Express, API → full-stack aplikace na internetu.
To, co teď umíš, je skutečný základ řemesla webového vývojáře. Ne hračka – základ. Stejné nástroje, stejné postupy, stejné myšlení jako v opravdových firmách.
Kam dál?
Pár směrů, které na tebe navazují přirozeně:
- Databáze – ať vzkazy přežijí restart serveru (SQLite je nejlaskavější začátek).
- TypeScript – JavaScript s kontrolou chyb; ve firmách standard.
- Git v terminálu –
git add,git commit,git pushmísto nahrávání souborů ručně. - Vlastní nápad – nejlepší učitel. Aplikace pro třídu? Turnajový pavouk pro klub? Teď už to postavíš.
Kontrola (a rozloučení): Frontend i backend běží na veřejných adresách a návštěvní kniha přijímá vzkazy z celého světa. Pošli adresu rodině – a nezapomeň jim říct, že jsi to celé postavil(a) vlastníma rukama. 🚀
Co si z téhle lekce odnést
- Frontend:
npm run build→ statické soubory → GitHub Pages/Netlify/Vercel. - Backend: repozitář na GitHubu → Render/Railway → veřejná adresa API → přepsat localhost ve frontendu.
- Veřejná aplikace = zodpovědnost: kontroly na serveru a dohled dospělého.
© 2026 Ing. Martin Polak / AlgoRhino · Warunki użytkowania treści