Het grote finale: deployen naar internet

Zet je hele app op internet – en kijk terug op de reis van je eerste <h1> tot hier.

De laatste stap van de reis

Je app draait op localhost, op je eigen computer. De laatste vaardigheid van de Meester: hem naar echte adressen brengen. Frontend en backend deploy je apart – precies waarom we ze apart bouwden.

De frontend deployen (React)

Vite kan je app met één commando in af bestanden zetten:

npm run build

Dit maakt een map dist/ – gewone HTML, CSS en JavaScript. En je weet al waar die moet: het is een statische website, net als in Level 1!

GitHub Pages – upload de inhoud van dist/ naar een repository, zoals in Level 1.
Of handiger, Netlify / Vercel – gratis, je koppelt ze aan je GitHub-account en ze deployen automatisch bij elke wijziging. Probeer er één met een ouder; de begeleide setup loopt je in een paar klikken door.

De backend deployen (Node.js)

Een server heeft een computer nodig die altijd aan staat. Daar zijn diensten als Render of Railway voor – ze hebben gratis tiers die genoeg zijn voor een schoolproject:

Upload de map my-server naar een eigen repository op GitHub (zonder node_modules – die wordt op de server automatisch geïnstalleerd).
Op render.com (met een ouder) kies je New → Web Service, koppel de GitHub-repository en stel in: Build Command npm install, Start Command node server.js.
Render geeft je een adres als https://my-server.onrender.com. Probeer .../api/messages in je browser – je API staat live op internet!
Laatste detail: vervang in de frontend elke http://localhost:3900 door het nieuwe serveradres en deploy de frontend opnieuw.

⚠️

Voordat je het gastenboek de wereld in stuurt, denk als een bewaker: iedereen op internet kan het vinden. Houd de lengtecontroles op de server (die heb je uit de vorige les!), toon berichten nooit als ruwe HTML (React beschermt je automatisch – nog een reden om het te gebruiken), en spreek met een ouder af het boek af en toe te controleren. Grote websites hebben hele teams daarvoor – dat heet moderatie.

🏆 Gefeliciteerd, Meester!

Neem even de tijd om terug te kijken waar je begon:

Level 1: een leeg bestand → <h1>It works!</h1> → een hele website van HTML en CSS op GitHub Pages.
Level 2: variabelen, voorwaarden, functies → donkere modus, galerij, quiz, formulier.
Level 3: de terminal, Node.js, React, componenten, state, Express, een API → een full-stack app op internet.

Wat je nu weet is het echte fundament van het webontwikkelaarsvak. Geen speelgoedversie – het echte fundament. Dezelfde tools, processen en manier van denken als in echte bedrijven.

Waar ga je naartoe?

Een paar richtingen die hier logisch op volgen:

Databases – zodat berichten een serverherstart overleven (SQLite is de vriendelijkste start).
TypeScript – JavaScript met foutcontrole; standaard in bedrijven.
Git in de terminal – git add, git commit, git push in plaats van bestanden met de hand uploaden.
Je eigen idee – de beste leraar. Een app voor je klas? Een toernooibracket voor je club? Nu weet je hoe je het bouwt.

✅

Controleer jezelf (en afscheid): Zowel frontend als backend draaien op openbare adressen, en het gastenboek accepteert berichten van over de hele wereld. Stuur het adres naar je familie – en vertel dat je alles met je eigen twee handen bouwde. 🚀

Wat neem je mee uit deze les

Frontend: npm run build → statische bestanden → GitHub Pages/Netlify/Vercel.
Backend: een GitHub-repository → Render/Railway → een openbaar API-adres → vervang localhost in de frontend.
Een openbare app is verantwoordelijkheid: servercontroles en een volwassene die meekijkt.