Den store finale: deployment til internettet

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

Rejsens sidste trin

Din app kører på localhost, på din egen computer. Mesterens sidste færdighed: at få den ud til rigtige adresser. Frontend og backend deployes separat – præcis derfor byggede vi dem adskilt fra starten.

Deployment af frontend (React)

Vite kan gøre din app til færdige filer med én kommando:

npm run build

Det opretter en dist/-mappe – almindelig HTML, CSS og JavaScript. Og du ved allerede, hvor den skal hen: det er en statisk hjemmeside, ligesom i niveau 1!

GitHub Pages – upload indholdet af dist/ til et repository, som du kender fra niveau 1.
Eller mere bekvemt, Netlify / Vercel – gratis, du forbinder dem til din GitHub-konto, og de deployer automatisk ved hver ændring. Prøv en af dem med en forælder; den guidede opsætning fører dig igennem på få klik.

Deployment af backend (Node.js)

En server har brug for en computer, der er tændt hele tiden. Det er det, tjenester som Render eller Railway er til – de har gratis niveauer, 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 forælder), vælg New → Web Service, forbind GitHub-repositoryet, og sæt: Build Command npm install, Start Command node server.js.
Render giver dig en adresse som https://my-server.onrender.com. Prøv .../api/messages i din browser – din API er live på internettet!
Én sidste detalje: i frontend, erstat hver http://localhost:3900 med den nye serveradresse, og deploy frontend igen.

⚠️

Før du slipper gæstebogen løs ud i verden, tænk som en vagt: alle på internettet kan finde den. Behold beskedlængde-tjek på serveren (du har dem fra sidste lektion!), vis aldrig beskeder som rå HTML (React beskytter dig mod dette automatisk – endnu en grund til at bruge det), og aftal med en forælder at tjekke bogen fra tid til anden. Store hjemmesider har hele teams til dette – det kaldes moderation.

🏆 Tillykke, Mester!

Tag et øjeblik til at se tilbage på, hvor du startede:

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

Hvad du ved nu, er det rigtige fundament for webudviklerens håndværk. Ikke en legetøjsversion – det faktiske fundament. De samme værktøjer, de samme processer, den samme måde at tænke på som i rigtige virksomheder.

Hvor går du hen nu?

Et par retninger, der naturligt følger herfra:

Databaser – så beskeder overlever en servergenstart (SQLite er det venligste sted at starte).
TypeScript – JavaScript med fejltjek; standard i virksomheder.
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.

✅

Tjek dig selv (og farvel): Både frontend og backend kører på offentlige adresser, og gæstebogen accepterer beskeder fra hele verden. Send adressen til din familie – og glem ikke at fortælle dem, at du byggede det hele med dine egne to hænder. 🚀

Det tager du med fra denne lektion

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: tjek på serversiden og et voksent øje på tingene.