En esta entrada te voy a enseñar a publicar un sitio web en una de las nubes edge más rápidas y convenientes que existen: Cloudflare.

Si quieres saber más sobre qué es el edge y cómo está cambiando la web, puedes escuchar el episodio del podcast sobre el edge o ver otro video que te dejo acá. Con Cloudflare puedes publicar tu sitio web, no en un solo servidor en gringolandia, sino en múltiples servidores en todo el mundo. En una red global de más de trescientas veinte ciudades, todas con una copia de tu aplicación, en más de ciento veinte países y además, no tienes que preocuparte por la infraestructura, pues tu app se ejecuta simplemente llamando a una función JS. 🤯 Cien por ciento serverless. Por eso, vamos a crear un proyecto con Remix, que es una de las maneras más sencillas para crear un sitio web hoy en día, para luego publicarlo en el Edge de Cloudflare, ¿qué te parece el plan? Bueno, si esto te interesa, ¡pues vamos ya! 👍

💿 Creando un proyecto web full stack con Remix

Existen varias maneras de crear un proyecto para Cloudflare, pero algunas de ellas puede que estén desactualizadas. Por eso, la manera más simple que encuentro para recomendarte es usar el template del propio equipo de Remix.

npx create-remix@latest --template remix-run/remix/templates/cloudflare

Responde las preguntas, nombra a tu proyecto remix-edge y entra en la carpeta con cd remix-edge.

Prueba tu proyecto ejecutando npm run dev. Verás que se levanta un servidor Vite. ⚡️

🚀 Hagamos deploy

Una vez que hemos iniciado nuestro proyecto Remix, es momento ya de publicarlo. Cloudflare lo hace increíblemente simple. Solo corremos npm run deploy.

Si observamos el script en el archivo package.json encontraremos que se ejecuta Wrangler y que se sube el cliente.

wrangler pages deploy ./build/client

👀 Wrangler te solicitará que inicies sesión.

Una vez que se ha subido deberías poder ver tu sitio desde una URL pública. En mi caso: https://remix-edge.pages.dev/ ¿genial no?

🎉 ¡Felicidades, en cuestión de nada has publicado un sitio web full stack! 🔥 ¿Qué se siente tener tal poder? No dejes de decirme en los comentarios si te gustaría que agregara una base de datos D1 a tu proyecto Remix. 😉

Abrazo. Bliss. 🤓

Enlaces relacionados

Ejemplo en producción

Podcast sobre qué es el Edge

Video sobre Cloudflare Workers

Wrangler