Posledný krok cesty
Tvoja aplikácia beží na localhoste na tvojom počítači. Posledná zručnosť Majstra: dostať ju na skutočné adresy. Frontend a backend sa nasadzujú oddelene – presne preto sme ich stavali oddelene.
Nasadenie frontendu (React)
Vite dokáže z aplikácie jedným príkazom spraviť hotové súbory:
npm run buildVznikne priečinok dist/ – obyčajné HTML, CSS a JavaScript. A už vieš, kam to dať: je to statická webová stránka, ako v Úrovni 1!
- GitHub Pages – nahraj obsah
dist/do repozitára, ako poznáš z Úrovne 1. - Alebo pohodlnejšie Netlify / Vercel – zadarmo, prepojíš s GitHub účtom a pri každej zmene nasadia automaticky. Vyskúšaj jednu z nich s rodičom; sprievodné nastavenie ťa prevedie pár klikmi.
Nasadenie backendu (Node.js)
Server potrebuje počítač, ktorý je stále zapnutý. Na to sú služby ako Render alebo Railway – majú bezplatné úrovne, ktoré stačia na školský projekt:
-
Nahraj priečinok
my-serverdo vlastného repozitára na GitHube (beznode_modules– na serveri sa nainštaluje automaticky). -
Na render.com (s rodičom) vyber New → Web Service, prepoj GitHub repozitár a nastav: Build Command
npm install, Start Commandnode server.js. -
Render ti dá adresu ako
https://my-server.onrender.com. Skús.../api/messagesv prehliadači – tvoje API žije na internete! -
Posledný detail: vo frontende nahraď každé
http://localhost:3900novou adresou servera a znova nasaď frontend.
Skôr než pustíš knihu návštev do sveta, mysli ako strážca: ktokoľvek na internete ju môže nájsť. Nechaj kontroly dĺžky správ na serveri (máš ich z minulej lekcie!), nikdy nezobrazuj správy ako surové HTML (React ťa pred tým automaticky chráni – ďalší dôvod ho používať) a dohodni sa s rodičom, že knihu občas skontrolujete. Veľké weby na to majú celé tímy – volá sa to moderovanie.
🏆 Gratulujem, Majster!
Na chvíľu sa pozri späť, kde si začínal:
- Úroveň 1: prázdny súbor →
<h1>It works!</h1>→ celá webová stránka HTML a CSS na GitHub Pages. - Úroveň 2: premenné, podmienky, funkcie → tmavý režim, galéria, kvíz, formulár.
- Úroveň 3: terminál, Node.js, React, komponenty, state, Express, API → full-stack aplikácia na internete.
Čo teraz vieš, je skutočný základ remesla webového vývojára. Nie hračkárska verzia – skutočný základ. Tie isté nástroje, tie isté procesy, ten istý spôsob myslenia ako vo firmách.
Kam ďalej?
Pár smerov, ktoré prirodzene nadväzujú:
- Databázy – aby správy prežili reštart servera (SQLite je najpriateľskejší štart).
- TypeScript – JavaScript s kontrolou chýb; štandard vo firmách.
- Git v termináli –
git add,git commit,git pushnamiesto ručného nahrávania súborov. - Vlastný nápad – najlepší učiteľ. Aplikácia pre triedu? Turnajový pavúk pre klub? Teraz vieš, ako ju postaviť.
Skontroluj sa (a rozlúčka): Frontend aj backend bežia na verejných adresách a kniha návštev prijíma správy z celého sveta. Pošli adresu rodine – a nezabudni im povedať, že si to celé postavil vlastnými rukami. 🚀
Čo si z tejto lekcie odnášaš
- Frontend:
npm run build→ statické súbory → GitHub Pages/Netlify/Vercel. - Backend: GitHub repozitár → Render/Railway → verejná adresa API → nahraď localhost vo frontende.
- Verejná aplikácia je zodpovednosť: kontroly na serveri a dohľad dospelého.
© 2026 Ing. Martin Polak / AlgoRhino · Podmienky používania obsahu