Desplegar en línea

Poner en línea: qué significa

Hasta ahora, tu app vive en tu herramienta o en tu ordenador: solo tú puedes usarla. Desplegar es copiar tu app a un servidor accesible desde Internet, que la sirve a quien abra la dirección correcta. El resultado concreto: una URL del tipo mi-app.vercel.app que Tom puede escribir en la pizarra, y que cada alumno abre en su teléfono.

Buena noticia para una app como la tuya: es gratis, rápido y muy automatizado. Las apps «estáticas» (HTML, CSS, JavaScript, sin servidor propio) son las más simples del mundo de alojar — exactamente por eso elegimos esa base técnica en el capítulo 3. Las elecciones simples del principio dan sus frutos ahora.

Las plataformas gratuitas

Tres grandes nombres dominan el alojamiento gratuito de apps web, y realmente no puedes equivocarte: todos son fiables, rápidos y usados por millones de proyectos. Así se elige:

Caso particular: si construiste tu app en Lovable, v0, Bolt o Replit, esas plataformas ofrecen un botón «Publish» o «Deploy» integrado que lo hace todo en un clic. Es la vía más simple — úsala para tu primera puesta en línea, ya explorarás Vercel o Netlify cuando lo necesites.

El método más simple: sin línea de comandos

Si Git y el terminal todavía te intimidan, existe un camino sin ningún comando: el arrastrar y soltar de Netlify. Pides a tu herramienta exportar o descargar los archivos de tu app (una carpeta con tu index.html y el resto), abres la página de subida de Netlify, y arrastras la carpeta a la zona prevista. Treinta segundos más tarde, tu app tiene una URL pública.

Este método tiene un límite: con cada modificación de tu app, debes volver a arrastrar la carpeta a mano. Está muy bien para una primera puesta en línea o una app que cambia poco. En cuanto modificas a menudo, el camino Git se vuelve más cómodo — cada commit enviado actualiza automáticamente el sitio.

El camino completo con Git y Vercel

El despliegue «profesional» sigue siempre la misma lógica: tu código vive en un repositorio Git alojado en GitHub, y la plataforma (Vercel o Netlify) vigila ese repositorio. Cada vez que envías una actualización, ella reconstruye y republica tu sitio automáticamente. Es el famoso «push to deploy» — nunca más te ocupas de la puesta en línea, sigue tu trabajo.

No necesitas memorizar el procedimiento: pide a la IA que te guíe, paso a paso, precisando tu nivel. Este es el prompt que usa Tom:

Guíame para desplegar esta app en Vercel, paso a paso, partiendo de cero.
Nunca he usado Git ni Vercel. Tengo una cuenta de GitHub recién creada.
Para cada paso: dime dónde hacer clic o qué comando teclear, y explica en una frase para qué sirve.
Espera mi confirmación antes de pasar al paso siguiente.

La última línea es un truco valioso: al pedir a la IA avanzar un paso a la vez, transformas un procedimiento intimidante en una conversación tranquila donde puedes señalar el más mínimo bloqueo en el momento en que surge. Como referencia, los comandos que verás pasar se parecen a esto:

# Vincular tu proyecto local al repositorio creado en GitHub:
git remote add origin https://github.com/tu-cuenta/mi-app.git

# Enviar tu código a GitHub:
git push -u origin main

# Después, en vercel.com: «Add New Project» → importar el repositorio → Deploy.

flowchart LR
  L["App en tu ordenador"] --> G["Repositorio Git"]
  G --> V["Vercel / Netlify"]
  V --> U["URL pública"]
  U --> F["Comentarios de usuarios"]
  F -.->|"Mejoras"| L

Verificar tu app en línea

Un despliegue exitoso no significa que todo funcione: el entorno en línea difiere ligeramente de tu vista previa local. Tómate cinco minutos para una verificación seria. Abre la URL pública en un navegador en navegación privada (para partir de cero, sin datos locales), rehaz el recorrido completo de un usuario, y luego abre la URL en tu teléfono — ahí es donde estarán tus usuarios.

• ¿La app carga, sin página en blanco ni error 404?
• ¿El recorrido principal funciona de principio a fin (añadir, marcar, ver la racha)?
• ¿Los datos persisten tras recargar la página?
• ¿La visualización es correcta en el teléfono: textos legibles, botones clicables con el pulgar?

Si algo se rompe en línea cuando funcionaba en local, sin pánico: es un gran clásico. Copia el error de la consola (F12, también en línea) y describe a la IA la diferencia: «en local funciona, en línea en Vercel obtengo este error: …». Las causas habituales — una ruta de archivo incorrecta, una mayúscula en un nombre de archivo — se corrigen en un mensaje.

Compartir y recoger comentarios

Una vez en línea, comparte la URL. El feedback real es el mejor combustible para progresar: Tom da el enlace a algunos alumnos y observa cómo lo usan. Y ahí, sorpresa garantizada — los usuarios nunca hacen lo que se espera. Un alumno intenta añadir veinte hábitos, otro busca un botón «deshacer» que no existe, un tercero pregunta por qué sus datos no están en el ordenador de casa (recuerda: localStorage = datos por dispositivo).

Recoge esos comentarios de forma simple: mira a la gente usar la app sin ayudarles, anota lo que les bloquea, y haz dos preguntas — «¿qué te ha molestado?» y «¿qué es lo que más echas en falta?». Tres usuarios bastan para detectar el 80 % de los problemas evidentes. Añade sus respuestas a tu lista «más tarde», y ordena: lo que se repite varias veces sube arriba.

¿Y después?

Tienes una verdadera app en línea. Itera: saca de tu lista «más tarde» enriquecida con los comentarios de usuarios, añade una funcionalidad por sesión siguiendo el método del capítulo 4, y republica — con el «push to deploy», cada mejora validada se va en línea sola. Las obras clásicas de una v2: un mejor diseño, un nombre de dominio personalizado, la exportación de los datos, o la sincronización entre dispositivos (la famosa cuenta de usuario, ahora que sabes lo que cuesta).

Y sobre todo, vuelve a empezar. Elige un segundo proyecto, un poco más ambicioso, y rehaz el recorrido completo: mini-PRD, construcción iterativa, depuración metódica, despliegue. Cada proyecto te hace más cómodo pilotando la IA, más rápido diagnosticando, más preciso en tus descripciones. Así es exactamente como se aprende a construir hoy — y acabas de dar la vuelta completa una primera vez. Bienvenido al club.