Das große Finale: ins Internet bringen

Bring deine ganze App ins Internet – und schau zurück auf die Reise von deinem ersten <h1> bis hierher.

Der letzte Schritt der Reise

Deine App läuft auf localhost, auf deinem Computer. Die letzte Meister-Fähigkeit: Sie unter echten Adressen erreichbar machen. Frontend und Backend werden getrennt deployed – genau deshalb haben wir sie getrennt gebaut.

Frontend deployen (React)

Vite kann deine App mit einem Befehl in fertige Dateien verwandeln:

npm run build

Das erstellt einen Ordner dist/ – normales HTML, CSS und JavaScript. Und du weißt schon, wohin damit: Das ist eine statische Website, genau wie in Level 1!

GitHub Pages – lade den Inhalt von dist/ in ein Repository hoch, wie du es aus Level 1 kennst.
Oder bequemer Netlify / Vercel – kostenlos, du verbindest sie mit deinem GitHub-Konto, und sie deployen bei jeder Änderung automatisch. Probiere eine davon mit einem Elternteil; die geführte Einrichtung führt dich in wenigen Klicks durch.

Backend deployen (Node.js)

Ein Server braucht einen Computer, der immer an ist. Dafür gibt es Dienste wie Render oder Railway – sie haben kostenlose Tarife, die für ein Schulprojekt reichen:

Lade den Ordner my-server in ein eigenes GitHub-Repository hoch (ohne node_modules – das wird auf dem Server automatisch installiert).
Auf render.com (mit einem Elternteil) wähle New → Web Service, verbinde das GitHub-Repository und setze: Build Command npm install, Start Command node server.js.
Render gibt dir eine Adresse wie https://my-server.onrender.com. Probiere .../api/messages im Browser – deine API ist live im Internet!
Ein letztes Detail: Ersetze im Frontend jedes http://localhost:3900 durch die neue Server-Adresse und deploye das Frontend erneut.

⚠️

Bevor du das Gästebuch in die Welt lässt, denk wie ein Wächter: Jeder im Internet kann es finden. Behalte die Längenprüfungen auf dem Server (du hast sie aus der letzten Lektion!), zeige Nachrichten nie als rohes HTML an (React schützt dich automatisch – ein weiterer Grund für React), und vereinbare mit einem Elternteil, das Buch ab und zu zu prüfen. Große Websites haben ganze Teams dafür – das heißt Moderation.

🏆 Glückwunsch, Meister!

Nimm dir einen Moment und schau zurück, wo du angefangen hast:

Level 1: leere Datei → <h1>It works!</h1> → ganze Website aus HTML und CSS auf GitHub Pages.
Level 2: Variablen, Bedingungen, Funktionen → Dark Mode, Galerie, Quiz, Formular.
Level 3: Terminal, Node.js, React, Komponenten, State, Express, API → eine Full-Stack-App im Internet.

Was du jetzt kannst, ist das echte Fundament des Web-Entwickler-Handwerks. Keine Spielzeugversion – das echte Fundament. Dieselben Werkzeuge, dieselben Abläufe, dieselbe Denkweise wie in echten Firmen.

Wohin als Nächstes?

Ein paar Richtungen, die sich natürlich anschließen:

Datenbanken – damit Nachrichten einen Server-Neustart überleben (SQLite ist der freundlichste Einstieg).
TypeScript – JavaScript mit Fehlerprüfung; Standard in Firmen.
Git im Terminal – git add, git commit, git push statt Dateien von Hand hochladen.
Deine eigene Idee – der beste Lehrer. Eine App für deine Klasse? Ein Turnierbaum für deinen Verein? Jetzt weißt du, wie du sie baust.

✅

Kontrolliere dich selbst (und Abschied): Frontend und Backend laufen unter öffentlichen Adressen, und das Gästebuch nimmt Nachrichten aus der ganzen Welt an. Schick die Adresse an deine Familie – und vergiss nicht zu sagen, dass du das alles mit eigenen Händen gebaut hast. 🚀

Das nimmst du aus dieser Lektion mit

Frontend: npm run build → statische Dateien → GitHub Pages/Netlify/Vercel.
Backend: GitHub-Repository → Render/Railway → öffentliche API-Adresse → localhost im Frontend ersetzen.
Eine öffentliche App ist Verantwortung: Server-Prüfungen und ein Erwachsener, der ein Auge drauf hat.