Le grand final : déployer sur internet

Mets toute ton app sur internet – et regarde le parcours depuis ton premier <h1> jusqu'ici.

La dernière étape du parcours

Ton app tourne sur localhost, sur ton propre ordinateur. La dernière compétence du Maître : la sortir vers de vraies adresses. Le frontend et le backend se déploient séparément – exactement pour ça qu’on les a construits à part.

Déployer le frontend (React)

Vite peut transformer ton app en fichiers finis avec une commande :

npm run build

Ça crée un dossier dist/ – du HTML, CSS et JavaScript simples. Et tu sais déjà où le mettre : c’est un site web statique, comme au Niveau 1 !

GitHub Pages – envoie le contenu de dist/ dans un dépôt, comme tu le connais du Niveau 1.
Ou plus pratiquement, Netlify / Vercel – gratuit, tu les connectes à ton compte GitHub, et ils déploient automatiquement à chaque changement. Essaie l’un d’eux avec un parent ; la configuration guidée te mène en quelques clics.

Déployer le backend (Node.js)

Un serveur a besoin d’un ordinateur qui reste allumé tout le temps. C’est pour ça qu’il y a des services comme Render ou Railway – ils ont des offres gratuites suffisantes pour un projet scolaire :

Envoie le dossier my-server dans son propre dépôt sur GitHub (sans node_modules – ça s’installe sur le serveur automatiquement).
Sur render.com (avec un parent), choisis New → Web Service, connecte le dépôt GitHub, et définis : Build Command npm install, Start Command node server.js.
Render te donnera une adresse comme https://my-server.onrender.com. Essaie .../api/messages dans ton navigateur – ton API est en ligne sur internet !
Un dernier détail : dans le frontend, remplace chaque http://localhost:3900 par la nouvelle adresse du serveur, et redéploie le frontend.

⚠️

Avant de laisser le livre d’or sortir dans le monde, pense comme un gardien : n’importe qui sur internet peut le trouver. Garde les vérifications de longueur de message côté serveur (tu les as de la dernière leçon !), n’affiche jamais les messages en HTML brut (React te protège automatiquement – une autre raison de l’utiliser), et mets-toi d’accord avec un parent pour vérifier le livre de temps en temps. Les grands sites web ont des équipes entières pour ça – ça s’appelle la modération.

🏆 Félicitations, Maître !

Prends un moment pour regarder d’où tu es parti :

Niveau 1 : un fichier vide → <h1>It works!</h1> → tout un site web HTML et CSS sur GitHub Pages.
Niveau 2 : variables, conditions, fonctions → mode sombre, galerie, quiz, formulaire.
Niveau 3 : terminal, Node.js, React, composants, state, Express, API → une app full-stack sur internet.

Ce que tu sais maintenant, c’est la vraie fondation du métier de développeur web. Pas une version jouet – la fondation réelle. Les mêmes outils, les mêmes processus, la même façon de penser que dans les vraies entreprises.

Où aller ensuite ?

Quelques directions qui suivent naturellement :

Bases de données – pour que les messages survivent au redémarrage du serveur (SQLite est le plus accueillant pour commencer).
TypeScript – JavaScript avec vérification d’erreurs ; standard dans les entreprises.
Git dans le terminal – git add, git commit, git push au lieu d’envoyer les fichiers à la main.
Ta propre idée – le meilleur professeur qui soit. Une app pour ta classe ? Un tableau de tournoi pour ton club ? Maintenant tu sais comment la construire.

✅

Vérifie (et au revoir) : Le frontend et le backend tournent à des adresses publiques, et le livre d’or accepte des messages du monde entier. Envoie l’adresse à ta famille – et n’oublie pas de leur dire que tu as tout construit de tes propres mains. 🚀

Ce que tu retiens de cette leçon

Frontend : npm run build → fichiers statiques → GitHub Pages/Netlify/Vercel.
Backend : un dépôt GitHub → Render/Railway → une adresse API publique → remplacer localhost dans le frontend.
Une app publique est une responsabilité : vérifications côté serveur et un adulte qui garde un œil dessus.