El gran final: desplegar en internet

Lleva toda tu app a internet – y mira atrás el camino desde tu primer <h1> hasta aquí.

El último paso del camino

Tu app funciona en localhost, en tu propio ordenador. La habilidad final del Maestro: sacarla a direcciones reales. El frontend y el backend se despliegan por separado – exactamente por eso los construimos aparte.

Desplegar el frontend (React)

Vite puede convertir tu app en archivos terminados con una sola orden:

npm run build

Esto crea una carpeta dist/ – HTML, CSS y JavaScript normales. Y ya sabes dónde ponerlo: es una web estática, ¡como en el Nivel 1!

GitHub Pages – sube el contenido de dist/ a un repositorio, como ya sabes del Nivel 1.
O más cómodo, Netlify / Vercel – gratis, los conectas a tu cuenta de GitHub, y despliegan solos con cada cambio. Prueba uno con un adulto; la configuración guiada te lleva en unos clics.

Desplegar el backend (Node.js)

Un servidor necesita un ordenador que esté siempre encendido. Para eso sirven servicios como Render o Railway – tienen planes gratis que bastan para un proyecto escolar:

Sube la carpeta my-server a su propio repositorio en GitHub (sin node_modules – eso se instala en el servidor automáticamente).
En render.com (con un adulto), elige New → Web Service, conecta el repositorio de GitHub y configura: Build Command npm install, Start Command node server.js.
Render te dará una dirección como https://my-server.onrender.com. Prueba .../api/messages en el navegador – ¡tu API está viva en internet!
Un último detalle: en el frontend, sustituye cada http://localhost:3900 por la nueva dirección del servidor, y vuelve a desplegar el frontend.

⚠️

Antes de dejar el libro de visitas suelto en el mundo, piensa como un guardia: cualquiera en internet puede encontrarlo. Mantén las comprobaciones de longitud de mensaje en el servidor (¡las tienes de la lección anterior!), nunca muestres mensajes como HTML crudo (React te protege de esto automáticamente – otra razón para usarlo), y acuerda con un adulto revisar el libro de vez en cuando. Las webs grandes tienen equipos enteros para esto – se llama moderación.

🏆 ¡Enhorabuena, Maestro!

Tómate un momento para mirar atrás dónde empezaste:

Nivel 1: un archivo vacío → <h1>It works!</h1> → una web entera de HTML y CSS en GitHub Pages.
Nivel 2: variables, condiciones, funciones → modo oscuro, galería, quiz, formulario.
Nivel 3: la terminal, Node.js, React, componentes, state, Express, una API → una app full-stack en internet.

Lo que sabes ahora es la base real del oficio de desarrollador web. No una versión de juguete – la base de verdad. Las mismas herramientas, los mismos procesos, la misma forma de pensar que en empresas reales.

¿Hacia dónde seguir?

Algunas direcciones que salen naturalmente de aquí:

Bases de datos – para que los mensajes sobrevivan a un reinicio del servidor (SQLite es el sitio más amigable para empezar).
TypeScript – JavaScript con comprobación de errores; estándar en empresas.
Git en la terminal – git add, git commit, git push en lugar de subir archivos a mano.
Tu propia idea – el mejor profesor que hay. ¿Una app para tu clase? ¿Un cuadro de un torneo para tu club? Ahora sabes cómo construirlo.

✅

Compruébalo tú (y despedida): Tanto el frontend como el backend funcionan en direcciones públicas, y el libro de visitas acepta mensajes de todo el mundo. Envía la dirección a tu familia – y no olvides contarles que lo construiste todo con tus propias manos. 🚀

Lo que te llevas de esta lección

Frontend: npm run build → archivos estáticos → GitHub Pages/Netlify/Vercel.
Backend: un repositorio en GitHub → Render/Railway → una dirección pública de API → sustituir localhost en el frontend.
Una app pública es una responsabilidad: comprobaciones en el servidor y un adulto vigilando.