Zadnji korak putovanja
Tvoja aplikacija radi na localhostu, na tvom računalu. Majstorova završna vještina: izbaciti je na prave adrese. Frontend i backend objavljuju se odvojeno – zato smo ih i gradili odvojeno.
Objavljivanje frontenda (React)
Vite može jednom naredbom pretvoriti aplikaciju u gotove datoteke:
npm run buildTo stvara mapu dist/ – običan HTML, CSS i JavaScript. I već znaš kamo to staviti: to je statična web stranica, baš kao u razini 1!
- GitHub Pages – prenesi sadržaj
dist/u repozitorij, kao što znaš iz razine 1. - Ili praktičnije, Netlify / Vercel – besplatno, povežeš s GitHub računom i automatski objavljuju pri svakoj promjeni. Isprobaj jedan uz roditelja; vođena postavka vodi te kroz nekoliko klikova.
Objavljivanje backenda (Node.js)
Server treba računalo koje je uvijek uključeno. Za to služe servisi poput Rendera ili Railwayja – imaju besplatne razine dovoljne za školski projekt:
-
Prenesi mapu
my-serveru vlastiti repozitorij na GitHubu (beznode_modules– to se na serveru instalira automatski). -
Na render.com (uz roditelja) odaberi New → Web Service, poveži GitHub repozitorij i postavi: Build Command
npm install, Start Commandnode server.js. -
Render će ti dati adresu poput
https://my-server.onrender.com. Isprobaj.../api/messagesu pregledniku – tvoj API je uživo na internetu! -
Zadnji detalj: u frontendu zamijeni svaki
http://localhost:3900novom adresom servera i ponovo objavi frontend.
Prije nego pustiš knjigu gostiju u svijet, razmisli kao čuvar: svatko na internetu je može pronaći. Zadrži provjere duljine poruka na serveru (imaš ih iz prošle lekcije!), nikad ne prikazuj poruke kao sirovi HTML (React te štiti od toga automatski – još jedan razlog zašto ga koristiti), i dogovori se s roditeljem da povremeno provjerite knjigu. Velike web stranice imaju cijele timove za to – zove se moderacija.
🏆 Čestitamo, Majstore!
Odvoji trenutak i pogledaj odakle si krenuo:
- Razina 1: prazna datoteka →
<h1>Radi!</h1>→ cijela web stranica HTML-a i CSS-a na GitHub Pagesu. - Razina 2: varijable, uvjeti, funkcije → tamni način, galerija, kviz, obrazac.
- Razina 3: terminal, Node.js, React, komponente, state, Express, API → full-stack aplikacija na internetu.
Ono što sada znaš pravi je temelj web programerskog zanata. Ne igračka verzija – pravi temelj. Isti alati, isti procesi, isto razmišljanje kao u pravim tvrtkama.
Kamo dalje?
Nekoliko smjerova koji prirodno slijede:
- Baze podataka – da poruke prežive ponovno pokretanje servera (SQLite je najprijateljskiji početak).
- TypeScript – JavaScript s provjerom grešaka; standard u tvrtkama.
- Git u terminalu –
git add,git commit,git pushumjesto ručnog prenošenja datoteka. - Vlastita ideja – najbolji učitelj. Aplikacija za razred? Tablica turnira za klub? Sada znaš kako je izgraditi.
Provjeri sam sebe (i zbogom): I frontend i backend rade na javnim adresama, a knjiga gostiju prima poruke iz cijelog svijeta. Pošalji adresu obitelji – i ne zaboravi reći da si sve izgradio vlastitim rukama. 🚀
Što ćeš ponijeti iz ove lekcije
- Frontend:
npm run build→ statične datoteke → GitHub Pages/Netlify/Vercel. - Backend: GitHub repozitorij → Render/Railway → javna API adresa → zamijeni localhost u frontendu.
- Javna aplikacija je odgovornost: provjere na serveru i odrasla osoba koja pazi.
© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja