Zadnji korak poti
Tvoja aplikacija teče na localhostu, na tvojem računalniku. Zadnja veščina Mojstra: spraviti jo na prave naslove. Frontend in backend objaviš ločeno – zato sva ju tudi ločeno gradila.
Objava frontenda (React)
Vite s enim ukazom pretvori aplikacijo v končne datoteke:
npm run buildNastane mapa dist/ – navaden HTML, CSS in JavaScript. In že veš, kam to gre: statična spletna stran, kot v ravni 1!
- GitHub Pages – vsebino
dist/naloži v repozitorij, kot v ravni 1. - Ali bolj priročno Netlify / Vercel – brezplačno, povežeš z GitHub računom in ob vsaki spremembi samodejno objavi. Preizkusi z staršem; vodeni nastavitev te vodi v nekaj klikih.
Objava backenda (Node.js)
Strežnik potrebuje računalnik, ki je ves čas vključen. Zato obstajajo storitve kot Render ali Railway – imajo brezplačne pakete, dovolj za šolski projekt:
-
Mapo
my-servernaloži v svoj repozitorij na GitHubu (breznode_modules– na strežniku se namesti sam). -
Na render.com (s staršem) izberi New → Web Service, poveži GitHub repozitorij in nastavi: Build Command
npm install, Start Commandnode server.js. -
Render ti da naslov kot
https://my-server.onrender.com. V brskalniku preizkusi.../api/messages– tvoj API je na internetu! -
Še ena podrobnost: v frontendu zamenjaj vsak
http://localhost:3900z novim naslovom strežnika in frontend znova objavi.
Preden knjigo obiskovalcev spustiš v svet, razmišljaj kot varovalec: jo lahko najde kdorkoli na internetu. Ohrani preverjanje dolžine sporočil na strežniku (imaš ga iz prejšnje lekcije!), sporočil nikoli ne prikazuj kot surovega HTML (React te ščiti samodejno – še en razlog za React) in se z staršem dogovori, da knjigo občasno preverita. Velike strani imajo celotne ekipe – to se imenuje moderacija.
🏆 Čestitke, Mojster!
Vzemi trenutek in se ozri, kje si začel:
- Raven 1: prazna datoteka →
<h1>It works!</h1>→ cela spletna stran HTML in CSS na GitHub Pages. - Raven 2: spremenljivke, pogoji, funkcije → temni način, galerija, kviz, obrazec.
- Raven 3: terminal, Node.js, React, komponente, state, Express, API → full-stack aplikacija na internetu.
Kar zdaj znaš, je pravi temelj spletnega razvoja. Ne igračka – pravi temelj. Ista orodja, isti postopki, isto razmišljanje kot v resnih podjetjih.
Kam naprej?
Nekaj smernic, ki naravno sledijo:
- Baze podatkov – da sporočila preživijo ponovni zagon strežnika (SQLite je najprijaznejši začetek).
- TypeScript – JavaScript s preverjanjem napak; standard v podjetjih.
- Git v terminalu –
git add,git commit,git pushnamesto ročnega nalaganja datotek. - Lastna ideja – najboljši učitelj. Aplikacija za razred? Turnir za klub? Zdaj veš, kako jo zgraditi.
Preveri se (in slovo): Frontend in backend tečeta na javnih naslovih, knjiga obiskovalcev sprejema sporočila z vsega sveta. Naslov pošlji družini – in ne pozabi povedati, da si vse zgradil s svojima rokama. 🚀
Kaj si vzameš iz te lekcije
- Frontend:
npm run build→ statične datoteke → GitHub Pages/Netlify/Vercel. - Backend: GitHub repozitorij → Render/Railway → javni naslov API → zamenjaj localhost v frontendu.
- Javna aplikacija je odgovornost: preverjanja na strežniku in odrasla oseba, ki pazi.
© 2026 Ing. Martin Polak / AlgoRhino · Pogoji uporabe vsebine