$ cd ..

Así codeamos con Claude · 07: repo, deploy y subdomain

14° · 52% · tarde despejada
claudeclaude-codeprocesstinyspritedev-log

Llegamos al final. Hasta acá la app vivía solo en localhost:3000 y en el localStorage del browser. Milestone 7: sacarla a internet. Repo público, deploy y dominio propio. Una tarde.

Repo público

Antes de pushear nada a internet, le pedí a Claude que arme el preflight: chequear que esté autenticado contra GitHub, que el working tree esté limpio, que los tags semver estén alineados.

Mensaje del agente: Autenticado como SebastianMaciel, repo limpio, 13 tags listos. Creo el repo público y pusheo.
preflight: identidad, working tree limpio, tags en orden.

Verde en los tres. gh repo create con visibility public, descripción y branch default. Push de todo, incluidos los tags.

Mensaje del agente: Repo creado y pusheado. github.com/SebastianMaciel/tinysprite. Visibilidad public, default branch main, descripción A tiny cozy pixel-art editor for the web, 28 commits pusheados, 17 tags pusheados (v0.1.0 → v0.13.4)
repo público con historia completa y tags semver de v0.1.0 a v0.13.4.

Deploy a Vercel

Una línea de CLI: vercel deploy --prod desde la raíz del repo. Vercel autodetecta Next 16 y arma todo solo.

Mensaje del agente con cohete: Deploy completo. Está vivo. Production URL: https://tinysprite.vercel.app
build 11s, deploy total 26s. URL temporal en vercel.app.

Subdomain propio

tinysprite.vercel.app está perfecto para pegar el link a alguien. Pero el dominio propio se siente mejor. Tengo sebastianmaciel.dev registrado, así que tinysprite.sebastianmaciel.dev es la forma natural.

Son dos pasos: agregar un A record en el panel del registrar apuntando a Vercel, y registrar el domain en el proyecto con vercel domains add. El cuello de botella del primer paso es el 2FA: cada vez que querés tocar DNS, código de seis dígitos nuevo cada 30 segundos. Para que la próxima vez que publique algo sea un solo comando, automaticé también la generación del OTP. El script entra al panel, calcula el código en runtime, lo escribe en el campo, mete el record y vuelve. Cero intervención mía.

Mensaje del agente: 2FA. Snapshot + OTP fresco.
snapshot del panel + OTP calculado al toque. El teléfono ni se prendió.

Con la sesión adentro, el record queda creado y la pelota pasa a Vercel: agregar el subdomain al proyecto y dejar que Vercel maneje el cert.

Mensaje del agente: Ahora propagation + alias en Vercel.
A record creado en Namecheap, ahora a esperar propagation DNS y aliasing en Vercel.

Vercel emite el cert Let's Encrypt automático apenas el DNS resuelve. Los edge nodes tardan unos segundos en propagar el cert nuevo a todas las regiones.

Mensaje del agente: SSL cert acaba de emitirse, edge nodes tardan unos segundos en propagar. Espero 20s y reintento.
SSL emitido, esperar a que los edges lo levanten.

Y arrancó.

Mensaje del agente con confeti: Subdomain vivo: https://tinysprite.sebastianmaciel.dev
vivo en tinysprite.sebastianmaciel.dev.

Cerramos la serie!

Siete capítulos para llegar a un editor vivo en internet. La app abre en tinysprite.sebastianmaciel.dev, el código está en github.com/SebastianMaciel/tinysprite, y todo lo que pasó por el camino quedó documentado capítulo a capítulo.

Si me llevo una sola cosa de la serie es esta: codear así, conversando con Claude paso a paso, me hizo parar antes de cada decisión que normalmente despacho por inercia. Stack, scope, persistencia, polish, todas pensadas con tiempo antes de la primera línea. Eso terminó importando más que cualquier ganancia de velocidad.

Si querés ver el editor antes de cerrar la pestaña, está acá: tinysprite.sebastianmaciel.dev.