Resans sista steg
Din app kör på localhost, på din egen dator. Mästarens sista färdighet: få ut den till riktiga adresser. Frontend och backend publiceras separat – precis därför byggde vi dem isär från början.
Publicera frontend (React)
Vite kan göra din app till färdiga filer med ett kommando:
npm run buildDet skapar en mapp dist/ – vanlig HTML, CSS och JavaScript. Och du vet redan vart de ska: det är en statisk webbplats, precis som på nivå 1!
- GitHub Pages – ladda upp innehållet i
dist/till ett repository, som du kan från nivå 1. - Eller bekvämare, Netlify / Vercel – gratis, du kopplar dem till ditt GitHub-konto och de publicerar automatiskt vid varje ändring. Prova en av dem med en förälder; den guidade installationen tar dig igenom det på några klick.
Publicera backend (Node.js)
En server behöver en dator som alltid är på. Det är det tjänster som Render eller Railway är till för – de har gratisnivåer som räcker för ett skolprojekt:
-
Ladda upp mappen
my-servertill ett eget repository på GitHub (utannode_modules– det installeras på servern automatiskt). -
På render.com (med en förälder), välj New → Web Service, koppla GitHub-repositoryt och sätt: Build Command
npm install, Start Commandnode server.js. -
Render ger dig en adress som
https://my-server.onrender.com. Prova.../api/messagesi webbläsaren – ditt API är live på internet! -
En sista detalj: i frontend, ersätt varje
http://localhost:3900med den nya serveradressen, och publicera frontend igen.
Innan du släpper ut gästboken i världen, tänk som en vakt: vem som helst på internet kan hitta den. Behåll meddelandelängdskontrollerna på servern (du har dem från förra lektionen!), visa aldrig meddelanden som rå HTML (React skyddar dig automatiskt – ännu en anledning att använda det), och kom överens med en förälder om att kolla boken då och då. Stora webbplatser har hela team för det – det kallas moderation.
🏆 Grattis, Mästare!
Ta ett ögonblick och se tillbaka på var du började:
- Nivå 1: en tom fil →
<h1>It works!</h1>→ en hel webbplats av HTML och CSS på GitHub Pages. - Nivå 2: variabler, villkor, funktioner → mörkt läge, galleri, quiz, formulär.
- Nivå 3: terminalen, Node.js, React, komponenter, state, Express, ett API → en full-stack-app på internet.
Det du kan nu är den riktiga grunden i webbutvecklarens hantverk. Inte en leksaksversion – den faktiska grunden. Samma verktyg, samma processer, samma sätt att tänka som i riktiga företag.
Vart går du härnäst?
Några riktningar som följer naturligt härifrån:
- Databaser – så meddelanden överlever en serveromstart (SQLite är den vänligaste starten).
- TypeScript – JavaScript med felkontroll; standard i företag.
- Git i terminalen –
git add,git commit,git pushi stället för att ladda upp filer för hand. - Din egen idé – den bästa läraren. En app för din klass? En turneringstabell för din klubb? Nu vet du hur du bygger den.
Kolla själv (och farväl): Både frontend och backend kör på offentliga adresser, och gästboken tar emot meddelanden från hela världen. Skicka adressen till familjen – och glöm inte berätta att du byggde allt med egna händer. 🚀
Det här tar du med dig från lektionen
- Frontend:
npm run build→ statiska filer → GitHub Pages/Netlify/Vercel. - Backend: ett GitHub-repository → Render/Railway → en offentlig API-adress → ersätt localhost i frontend.
- En offentlig app är ett ansvar: kontroller på serversidan och en vuxen som håller koll.
© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning