Den store finale: deployment til internettet

Få hele din app ud på internettet – og se tilbake på reisen fra din første <h1> til her.

Rejsens siste trin

Din app kjører på localhost, på din egen datamaskin. Mesterens siste færdighed: at få den ud til rigtige adresser. Frontend og backend deployes separat – nøyaktig derfor byggede vi dem adskilt fra starten.

Deployment af frontend (React)

Vite kan gjøre din app til ferdige filer med én kommando:

npm run build

Det oppretter en dist/-mappe – vanlig HTML, CSS og JavaScript. Og du ved allerede, hvor den skal hen: det er en statisk nettside, som i nivå 1!

GitHub Pages – upload indholdet af dist/ til et repository, som du kjenner fra nivå 1.
Eller mere bekvemt, Netlify / Vercel – gratis, du kobler dem til din GitHub-konto, og de deployer automatisk ved hver endring. Prøv en af dem med en forelder; den guidede opsetning fører deg igjennom på få klik.

Deployment af backend (Node.js)

En server har bruk for en datamaskin, der er tændt hele tiden. Det er det, tjenester som Render eller Railway er til – de har gratis nivåer, der er nok til et skoleprojekt:

Upload mappen my-server til sit eget repository på GitHub (uden node_modules – det installeres på serveren automatisk).
På render.com (med en forelder), velg New → Web Service, forbind GitHub-repositoryet, og sett: Build Command npm install, Start Command node server.js.
Render giver deg en adresse som https://my-server.onrender.com. Prøv .../api/messages i nettleseren – din API er live på internettet!
Én siste detalje: i frontend, erstat hver http://localhost:3900 med den nye serveradresse, og deploy frontend igen.

⚠️

Før du slipper gjesteboken løs ud i verden, tenk som en vakt: alle på internettet kan finde den. Behold meldinglængde-sjekk på serveren (du har dem fra siste leksjon!), vis aldrig meldinger som rå HTML (React beskytter deg mod dette automatisk – endnu en grund til at bruke det), og aftal med en forelder at sjekke bogen fra tid til anden. Store nettsider har hele teams til dette – det kaldes moderation.

🏆 Gratulerer, Mester!

Tag et øyeblikk til at se tilbake på, hvor du startede:

Nivå 1: en tom fil → <h1>It works!</h1> → en hel nettside af HTML og CSS på GitHub Pages.
Nivå 2: variabler, betingelser, funktioner → mørk tilstand, et galleri, en quiz, en formular.
Nivå 3: terminalen, Node.js, React, komponenter, state, Express, en API → en full-stack-app på internettet.

Hva du ved nu, er det rigtige fundament for webutviklerens håndværk. Ikke en legetøjsversion – det faktiske fundament. De samme verktøyer, de samme processer, den samme måde at tenke på som i rigtige selskaper.

Hvor går du hen nu?

Et par retninger, der naturligt følger herfra:

Databaser – så meldinger overlever en servergenstart (SQLite er det venligste sted at starte).
TypeScript – JavaScript med feiltjek; standard i selskaper.
Git i terminalen – git add, git commit, git push i stedet for at uploade filer i hånden.
Din egen idé – den bedste lærer. En app til din klasse? En turneringsstilling til din klub? Nu ved du, hvordan man bygger den.

✅

Sjekk deg selv (og fargel): Både frontend og backend kjører på offentlige adresser, og gjesteboken accepterer meldinger fra hele verden. Send adressen til din familie – og glem ikke at fortelle dem, at du byggede det hele med dine egne to hænder. 🚀

Dette tar du med deg fra leksjonen

Frontend: npm run build → statiske filer → GitHub Pages/Netlify/Vercel.
Backend: et GitHub-repository → Render/Railway → en offentlig API-adresse → erstat localhost i frontend.
En offentlig app er et ansvar: sjekk på serversiden og et voksent øje på tingene.