2. HTML - CSS+TailwindCSS - JS Vanilla+Astro.build

Astro.build: Es considerado el framework 'todo en uno'. Se basa en generar HTML estático y usar Node.js en el servidor solo cuando es estrictamente necesario.

🎻 Filosofía Astro: Astro actúa como el director de orquesta, mientras que el resto de frameworks o librerías del ecosistema son los músicos.

Para iniciar un proyecto con este stack, ejecutamos en la terminal:

pnpm dlx create-astro@latest

El asistente te guiará con unas preguntas (nombre de la carpeta, inicializar Git, etc.). Cuando te pregunte si deseas instalar las dependencias con pnpm, selecciona Sí.

Para integrar Tailwind de forma automática, aprovechamos que Astro es nuestro director de orquesta y ejecutamos:

pnpm astro add tailwind

Astro descargará tailwindcss, configurará las herramientas y activará la integración de forma limpia en tu archivo astro.config.mjs.

Durante este proceso, Astro creará un archivo CSS global (normalmente en src/styles/global.css). Al abrirlo, verás la importación de tailwind:

@import "tailwindcss";

Puedes personalizar este archivo a tu gusto. Aquí tienes un ejemplo completo de configuración en la versión 4 de tailwind:

Trabajar con plantillas

Una de las facilidades de Astro, es la posibilidad de trabajar con plantillas. Crea una carpeta llamada layouts dentro de la carpeta src. Crea un archivo nuevo, denominado Layout.astro. (Las plantillas de Astro comienzan usan UpperCamelCase y todos los archivos tienen la extensión .astro

Para que estos estilos se apliquen en todo el sitio, importamos el archivo CSS en el Layout principal (src/layouts/Layout.astro). Copia el código siguiente en archivo Layout.astro recién creado:

Ahora, al trabajar en tus páginas (como src/pages/index.astro), tu código HTML quedará sumamente limpio al heredar toda la estructura del Layout:

Comprobar que todo funciona

Ejecuta tu servidor de desarrollo desde la terminal: pnpm dev

Agregar plugins de Tailwind desde Astro

Agregaremos dos plugins en esta oportunidad:

• @tailwindcss/forms: Tailwind por defecto (Preflight)limpia y aplana los formularios para que no rompan tu diseño, pero toca estilizarlos casi desde cero. Este plugin, modifica automáticamente el estilo de los controles de formulario, permitiéndo cambiar sus colores o bordes usando clases simples de Tailwind de forma mucho más directa:

  - Todos los inputs, selectores y textareas tienen un borde sutil, un sombreado ligero y esquinas redondeadas muy elegantes por defecto.

  - Los checkbox y radio buttons se vuelven estilizable de forma nativa.

• tailwindcss-animate: añade decenas de clases listas para usar: desvanecimientos, deslizamientos, zooms y efectos de entrada/salida combinables.

Paso 1: Desde la terminal del proyecto Astro, añadimos los plugins como dependencias de desarrollo (-D) usando pnpm:

pnpm add -D @tailwindcss/forms tailwindcss-animate

Paso 2: Abrimos nuestro archivo src/styles/global.css y registramos los plugins justo debajo de la importación principal de Tailwind utilizando la directiva @plugin. El bloque superior de global.css quedaría así:

Desplegar el proyecto en Netlify

Paso 1. Compilar el proyecto

El proceso es similar al Stack 1.

• Abre la terminal en tu editor (Visual Studio Code) y asegúrate de que tu servidor de desarrollo esté apagado (puedes presionar Ctrl C para apagarlo)

• Ejecuta el comando de producción:

  pnpm build

• Verás que en tu proyecto se crea (o se actualiza) la carpeta llamada dist/ (el código de producción)

Paso 2. Subir el proyecto a Netlify

Netlify tiene una herramienta específica que se llama Netlify Drop.

• Entra a app.netlify.com/drop.

  No hace falta crear repositorio. Puedes arrastrar la carpeta dist incluso sin haber iniciado sesión (aunque si no te creas una cuenta, la web caduca en 24 horas. Si te registras con tu email, el proyecto se guarda para siempre).

• Arrastra la carpeta dist, la plataforma lee el index.html que Astro generó dentro de ella, y te dará da la URL en 3 segundos.

¿Cómo gestionar múltiples proyectos en Netlify?

La primera vez que arrastres la carpeta dist, la plataforma te creará un "Proyecto 1" con una URL aleatoria (que una vez registrado, puedes cambiar por algo como mi-proyecto-astro.netlify.app).

Cuando quieras subir tu segundo proyecto:

• Entra a tu panel de control (Dashboard) de Netlify. Verás la lista con tu primer proyecto.
• Haz clic en un botón que dice Add new site (Añadir nuevo sitio) ➔ Deploy manually (Desplegar manualmente).
• Te volverá a salir un recuadro similar al que usaste para el primer proyecto. Arrastra la nueva carpeta dist de tu segundo proyecto, y tendrás un Proyecto 2 con una URL totalmente diferente.

¿Donde vamos a partir de hoy?

Iremos estudiando todo lo que podemos hacer con Astro.

Una vez conozcas Astro, pasaremos a React y esta vez haremos el despliegue en otra herramienta que se llama Vercel.