Wielki finał: wdrażanie do internetu

Wypchniesz całą aplikację do internetu – i spojrzysz wstecz na drogę od pierwszego <h1> do tutaj.

Ostatni krok podróży

Twoja aplikacja działa na localhost, na twoim własnym komputerze. Ostatnia umiejętność Mistrza: wypchnąć ją na prawdziwe adresy. Frontend i backend wdraża się osobno – właśnie dlatego od początku budowaliśmy je osobno.

Wdrażanie frontendu (React)

Vite jednym poleceniem zamieni twoją aplikację w gotowe pliki:

npm run build

Powstanie folder dist/ – zwykły HTML, CSS i JavaScript. I już wiesz, gdzie to wrzucić: to strona statyczna, tak jak na poziomie 1!

GitHub Pages – wgraj zawartość dist/ do repozytorium, tak jak znasz z poziomu 1.
Albo wygodniej Netlify / Vercel – za darmo, łączysz z kontem GitHub i wdrażają automatycznie przy każdej zmianie. Wypróbuj jedno z rodzicem; prowadzona konfiguracja przeprowadzi cię przez to w kilku kliknięciach.

Wdrażanie backendu (Node.js)

Serwer potrzebuje komputera, który jest zawsze włączony. Do tego służą usługi typu Render albo Railway – mają darmowe plany wystarczające na szkolny projekt:

Wgraj folder my-server do własnego repozytorium na GitHubie (bez node_modules – to zainstaluje się na serwerze automatycznie).
Na render.com (z rodzicem) wybierz New → Web Service, podłącz repozytorium GitHub i ustaw: Build Command npm install, Start Command node server.js.
Render da ci adres typu https://my-server.onrender.com. Wypróbuj .../api/messages w przeglądarce – twoje API żyje w internecie!
Ostatni szczegół: we frontendzie zamień każde http://localhost:3900 na nowy adres serwera i wdróż frontend ponownie.

⚠️

Zanim wypuścisz księgę gości w świat, pomyśl jak strażnik: każdy w internecie może ją znaleźć. Zostaw sprawdzanie długości wiadomości na serwerze (masz je z poprzedniej lekcji!), nigdy nie wyświetlaj wiadomości jako surowego HTML (React chroni cię przed tym automatycznie – kolejny powód, by go używać), i umów się z rodzicem, że od czasu do czasu zajrzycie do księgi. Duże strony mają na to całe zespoły – nazywa się to moderacja.

🏆 Gratulacje, Mistrzu!

Zatrzymaj się na chwilę i spójrz, skąd wyszedłeś:

Poziom 1: pusty plik → <h1>It works!</h1> → cała strona HTML i CSS na GitHub Pages.
Poziom 2: zmienne, warunki, funkcje → ciemny tryb, galeria, quiz, formularz.
Poziom 3: terminal, Node.js, React, komponenty, state, Express, API → aplikacja full-stack w internecie.

To, co umiesz teraz, to prawdziwy fundament rzemiosła web developera. Nie zabawkowa wersja – prawdziwy fundament. Te same narzędzia, te same procesy, ten sam sposób myślenia co w prawdziwych firmach.

Dokąd dalej?

Kilka kierunków, które naturalnie stąd wynikają:

Bazy danych – żeby wiadomości przeżyły restart serwera (SQLite to najprzyjaźniejszy start).
TypeScript – JavaScript ze sprawdzaniem błędów; standard w firmach.
Git w terminalu – git add, git commit, git push zamiast wgrywania plików ręcznie.
Własny pomysł – najlepszy nauczyciel, jaki jest. Aplikacja dla klasy? Drabinka turniejowa dla klubu? Teraz wiesz, jak to zbudować.

✅

Sprawdź się (i żegnaj): Frontend i backend działają pod publicznymi adresami, a księga gości przyjmuje wiadomości z całego świata. Wyślij adres rodzinie – i nie zapomnij powiedzieć, że zbudowałeś to wszystko własnymi rękami. 🚀

Co wyniesiesz z tej lekcji

Frontend: npm run build → pliki statyczne → GitHub Pages/Netlify/Vercel.
Backend: repozytorium GitHub → Render/Railway → publiczny adres API → zamiana localhost we frontendzie.
Publiczna aplikacja to odpowiedzialność: sprawdzanie po stronie serwera i dorosły, który ma na to oko.