Il gran finale: pubblicare su internet

Porta tutta la tua app su internet – e guarda indietro al viaggio dal tuo primo <h1> fino a qui.

L’ultimo passo del viaggio

La tua app gira su localhost, sul tuo computer. L’ultima abilità del Maestro: portarla su indirizzi veri. Frontend e backend si pubblicano separatamente – esattamente il motivo per cui li abbiamo costruiti separati.

Pubblicare il frontend (React)

Vite può trasformare la tua app in file finiti con un solo comando:

npm run build

Questo crea una cartella dist/ – HTML, CSS e JavaScript semplici. E sai già dove metterla: è un sito web statico, proprio come al Livello 1!

GitHub Pages – carica il contenuto di dist/ in un repository, come sai dal Livello 1.
Oppure più comodamente, Netlify / Vercel – gratuiti, li colleghi al tuo account GitHub, e pubblicano automaticamente a ogni modifica. Prova uno con un genitore; la configurazione guidata ti accompagna in pochi clic.

Pubblicare il backend (Node.js)

Un server ha bisogno di un computer sempre acceso. Per questo servono servizi come Render o Railway – hanno piani gratuiti sufficienti per un progetto scolastico:

Carica la cartella my-server nel suo repository GitHub (senza node_modules – si installa automaticamente sul server).
Su render.com (con un genitore), scegli New → Web Service, collega il repository GitHub, e imposta: Build Command npm install, Start Command node server.js.
Render ti darà un indirizzo tipo https://my-server.onrender.com. Prova .../api/messages nel browser – la tua API è live su internet!
Un ultimo dettaglio: nel frontend, sostituisci ogni http://localhost:3900 con il nuovo indirizzo del server, e pubblica di nuovo il frontend.

⚠️

Prima di lasciare il libro degli ospiti uscire nel mondo, pensa come una guardia: chiunque su internet può trovarlo. Mantieni i controlli sulla lunghezza dei messaggi sul server (li hai dall’ultima lezione!), non mostrare mai i messaggi come HTML grezzo (React ti protegge automaticamente – un altro motivo per usarlo), e concorda con un genitore di controllare il libro di tanto in tanto. I grandi siti web hanno interi team per questo – si chiama moderazione.

🏆 Congratulazioni, Maestro!

Prenditi un momento per guardare indietro a dove hai iniziato:

Livello 1: un file vuoto → <h1>It works!</h1> → un intero sito web di HTML e CSS su GitHub Pages.
Livello 2: variabili, condizioni, funzioni → modalità scura, una galleria, un quiz, un modulo.
Livello 3: il terminale, Node.js, React, componenti, state, Express, un’API → un’app full-stack su internet.

Quello che sai ora è la vera base del mestiere dello sviluppatore web. Non una versione giocattolo – la base vera. Gli stessi strumenti, gli stessi processi, lo stesso modo di pensare delle aziende vere.

Dove andare dopo?

Alcune direzioni che seguono naturalmente da qui:

Database – così i messaggi sopravvivono a un riavvio del server (SQLite è il punto di partenza più amichevole).
TypeScript – JavaScript con controllo degli errori; standard nelle aziende.
Git nel terminale – git add, git commit, git push invece di caricare file a mano.
La tua idea – il miglior insegnante che ci sia. Un’app per la tua classe? Un tabellone per il tuo club? Ora sai come costruirla.

✅

Controlla da solo (e addio): Sia il frontend che il backend girano su indirizzi pubblici, e il libro degli ospiti accetta messaggi da tutto il mondo. Manda l’indirizzo alla tua famiglia – e non dimenticare di dirgli che hai costruito tutto con le tue mani. 🚀

Cosa porti via da questa lezione

Frontend: npm run build → file statici → GitHub Pages/Netlify/Vercel.
Backend: un repository GitHub → Render/Railway → un indirizzo API pubblico → sostituisci localhost nel frontend.
Un’app pubblica è una responsabilità: controlli lato server e un adulto che tiene d’occhio.