Nivel: básico
Muchas personas se bloquean al desplegar y publicar su proyecto, así que hoy voy a tratar de enseñarte las 6 herramientas que usa Claude (y yo) para trabajar en cualquier proyecto web. Si lo que quieres es construir apps para mobile o desktop, no te vayas porque también te interesa :)
Lo que veremos hoy:
El stack mínimo
Qué es Vercel y cómo funciona
Las tres cosas que tienes que hacer a mano
El prompt para que Claude Code instale lo demás
Qué descarto del stack mínimo
Tres preguntas para seguir el hilo con Claude
Hola, soy Pol Marzà, AI Product Builder y cada semana escribo una nueva edición de Con Criterio, la newsletter sobre construir productos digitales con IA, con planificación, método y sin atajos. Si te han reenviado este email, puedes suscribirte aquí:
Antes de empezar me gustaría repetir la encuesta de la semana pasada en la que te pregunté sobre cuando prefieres asistir a un directo:
Igual es porque lancé la publicación en un puente (en España), pero la participación fue MUY baja ^^”
Bueno, ¡vamos al lío!
1. El stack mínimo
Las seis son Node.js, pnpm, Git, GitHub, Claude Code y Vercel. Las uso igual en una landing, en un portfolio o en una aplicación con usuarios, y lo que cambia de un proyecto a otro es todo lo demás (el framework, la base de datos, los servicios externos), que se decide cuando ya sabes qué quieres construir.
Node.js es un programa que hace falta para que funcionen las herramientas con las que se construye una web, como Astro, que usaremos en el directo.
pnpm descarga e instala las librerías, que son trozos de código hechos por otras personas y que tu proyecto reutiliza, y apunta cuáles son y en qué versión. Existen otros programas que hacen lo mismo (npm y yarn).
Git guarda el historial de tu proyecto: cada versión que decides guardar (se llama commit) queda registrada y puedes volver a ella más adelante. También permite crear ramas, que son copias paralelas del proyecto para probar cambios sin tocar la versión principal, que se llama main.
GitHub es un servicio en internet donde se guarda el proyecto con todo su historial. Esa carpeta del proyecto junto con su historial se llama repositorio.
Claude Code escribe y modifica el código por ti a partir de lo que le pides en lenguaje normal. También puede ejecutar comandos en tu ordenador, y por defecto te pide permiso antes de hacerlo, así que en este envío le pediremos que instale el resto. Existe como aplicación de escritorio, en terminal, en editores y en la web, y yo uso la de escritorio porque permite ver los cambios a medida que los hace.
Vercel publica tu proyecto en una dirección web a partir de lo que hay en GitHub.
Es bastante tralla para empezar, un buen glosario que te recomiendo que leas un par de veces antes de continuar.
No hace falta que te lo aprendas, pero es bueno que te vayan sonando estos conceptos porque irán saliendo más a menudo.
2. Qué es Vercel y cómo funciona
Vercel es el servicio que publica tu proyecto en una dirección web, por ejemplo tu-proyecto.vercel.app. Se conecta a tu repositorio de GitHub, lee lo que hay dentro y lo publica sin que tengas que subir archivos a mano.
Para entender cuándo publica, necesitas un concepto de Git: la rama. Un proyecto puede tener varias versiones en paralelo, y cada una de esas versiones es una rama. Parten del mismo proyecto y lo que cambias en una no afecta a las demás. Todo proyecto tiene una rama principal, que se llama main, y es la versión que consideras terminada.
Vercel actúa según en qué rama está el cambio:
maines el nombre de la rama principal de tu proyecto, y lo que hay en ella es lo que Vercel publica en la dirección principal.
Una previsualización es una copia de tu web con los cambios de esa rama, en una dirección que solo tienes tú. Sirve para abrirla, comprobar que todo se ve bien y decidir si el cambio se queda. Cuando lo das por bueno, lo incorporas a main y entonces pasa a ser público.
Así se trabaja después con Claude Code: le pides que haga los cambios en una rama, abres la previsualización que genera Vercel y, si te gusta, los incorporas a main.
3. Las tres cosas que tienes que hacer a mano
De las tres, la que puedes cambiar por otra es la primera. Yo uso Claude Code (I <3 Claude), pero si prefieres usar Codex, Gemini o cualquier otra opción, adelante:
Claude Code. Descarga la aplicación de escritorio desde este enlace. Luego inicia sesión (con Google) y abre la pestaña de Code.
GitHub. Crea una cuenta en https://github.com
Vercel. Regístrate en https://vercel.com eligiendo la opción de entrar con tu cuenta de GitHub (que has creado previamente).
El orden del punto 2 y 3 debe ser este ya que Vercel necesita estar vinculado con tu cuenta de GitHub para que, más tarde, puedas hacer los despliegues (poner tu web en internet) de manera automática.
4. El prompt para que Claude Code instale lo demás
En la pestaña Code, elige una carpeta nueva (por ejemplo, una llamada Proyectos) y pega este prompt:
Quiero preparar este ordenador para construir proyectos web con ayuda de Claude Code. Necesito tener instalados Node.js (versión LTS), pnpm 11 y Git. Haz esto en orden:
1. Comprueba cuáles de estas herramientas ya están instaladas y qué versión tienen, y enséñame el resultado en una tabla.
2. Instala solo las que falten, con el método habitual de mi sistema operativo. Antes de cada instalación, dime qué vas a instalar y por qué, y espera mi confirmación.
3. Si algún paso necesita contraseña de administrador o una descarga manual, no lo intentes: explícame con pasos sencillos lo que tengo que hacer yo.
4. Configura Git con mi nombre y mi correo (pregúntamelos).
5. Al final, comprueba que todo funciona y dame un resumen en lenguaje sencillo, con las versiones instaladas y lo que quede pendiente.
Claude Code te pedirá permiso antes de cada comando, y conviene leer qué va a ejecutar antes de aprobarlo. Si algo falla, pega el mensaje de error en la misma conversación y pídele que lo resuelva.
Cuando el resumen final muestre las versiones de Node.js, pnpm y Git, el entorno está listo. Lo siguiente es decidir qué construir y qué más necesita, que es el tema del próximo envío.
5. Qué descarto del stack mínimo
Hay tres cosas que no forman parte del stack mínimo y que puedes dejar para cuando las necesites (o sientas curiosidad por ellas):
Editor de código. La aplicación de escritorio de Claude Code muestra los cambios que hace en tus archivos, así que para empezar no necesitas abrirlos en otro programa.
Base de datos. Una landing o un portfolio muestran lo mismo a todos los visitantes y no necesitan guardar datos. Cuándo añadirla y cuál elegir depende de la idea, y por eso es el tema del siguiente envío.
Cuentas de usuario. Que la gente pueda registrarse exige una base de datos y un sistema de acceso, y nada de eso hace falta para publicar una primera web.
6. Tres preguntas para seguir el hilo con Claude
¿Qué es ese gestor de paquetes, qué instala exactamente y cómo lo desinstalo si quiero?
Mi repositorio de GitHub es privado y mi cuenta de Vercel es Hobby: ¿qué restricciones tengo al desplegar y en qué casos me obliga a pasar a Pro?
¿Qué diferencia hay entre un commit y una rama, y cuándo conviene pedirle a Claude Code que trabaje en una rama nueva en vez de en main?
¡Todo listo, esperando el siguiente paso! Entiendo que la elección de Vercel es por el Stack que propones, ¿no?