Lemoncode TV

03. Creando el proyecto

💡 Antes de empezar: Asegúrate de tener instalado el plugin oficial de Astro en VSCode. Te dará autocompletado, resaltado de sintaxis y otras mejoras muy útiles para el desarrollo.

1. Crear el proyecto

Para comenzar, vamos a crear un proyecto en blanco con Astro:

npm create astro@latest

Este comando ejecuta un asistente interactivo (wizard) que nos guía paso a paso para crear el proyecto.

Seleccionamos las siguientes opciones:

• Nombre del proyecto: podríamos poner micampus pero eso nos crearía una subcarpeta, así que ponemos un . para crear el proyecto directamente en el directorio actual.

• Plantilla: basic (opción minimal starter), hay otras que ya incluyen más funcionalidades, pero en este caso la mínima nos sirve para aprender desde cero.

• ¿Instalar dependencias?: Yes, es decir hace un npm install automáticamente.

• ¿Inicializar repositorio Git?: como prefieras; en este caso: Yes, así tendremos un control de versiones desde el inicio (esto no siempre es buena idea hacerlo, por ejemplo si vas a integrarlo en un mono repo puede que ya haya un repositorio Git inicializado en la raíz del proyecto).

Con esta información, generará una estructura básica lista para trabajar.

2. Iniciar el proyecto

Vamos a ejecutar el servidor de desarrollo:

npm run dev

Abrimos el navegador y visitamos:

http://localhost:4321

Este puerto igual te resulta raro, así que te voy a contar un truco para que te acuerdes de ese número: piensa en la cuenta atrás de lanzamiento de un cohete: 4, 3, 2, 1 🚀

Si ves la pantalla de bienvenida de Astro, ¡todo va bien!

3. Configurar Prettier para Astro

Prettier es un formateador de código automático. Nos ayuda a mantener el código limpio y consistente, sin tener que preocuparnos por el estilo.

Lo normal es que Prettier funcione en multitud de proyectos, pero para Astro tenemos que enseñarle trucos nuevos, ya que no sabe como formatear los archivos .astro por defecto.

Instalamos Prettier y su plugin específico para archivos .astro:

npm install --save-dev prettier
npm install --save-dev prettier-plugin-astro

Luego, creamos el archivo .prettierrc en la raíz del proyecto con esta configuración:

{
  "plugins": ["prettier-plugin-astro"],
  "overrides": [
    {
      "files": "*.astro",
      "options": {
        "parser": "astro"
      }
    }
  ]
}

Esto le dice a Prettier cómo manejar archivos .astro, asegurando que también esos estén bien formateados.

4. Instalar Tailwind CSS

Tailwind CSS es un framework de utilidades para estilos. Permite construir interfaces rápidamente usando clases predefinidas directamente en el HTML.

Tailwind tiene tanto defensores como detractores:

• Sus defensores valoran su velocidad de desarrollo y la consistencia en el diseño.

• Algunos más puristas del CSS lo critican por mezclar lógica visual con marcado, y por alejarse de metodologías tradicionales como BEM o separación estricta de estilos.

Para este proyecto, lo usaremos porque nos permite iterar rápido sin tener que definir hojas de estilo desde cero.

Astro facilita la integración de tailwind gracias a un comando específico:

npx astro add tailwind

Este comando ejecuta un asistente automático que configura todo por nosotros:

✔ Crea un archivo src/styles/global.css , donde se importan los estilos de Tailwind. ✔ Y actualiza astro.config.mjs, para que use Tailwind como plugin de Vite.

Solo hay que aceptar las opciones por defecto.

En el siguiente paso veremos cómo usar estos estilos dentro del layout principal del proyecto.

Creando alias

Por último, vamos a tener una serie de carpetas en el raíz del proyecto:

• api
• Components
• Layouts
• Pages

Que referenciaremos en diferentes ficheros a diferentes niveles, y eso de ir con rutas relativas del tipo ../../../ no es muy cómodo, así que vamos a crear unos alias para que sea más fácil importar de esas carpetas.

En el archivo tsconfig.json añadimos un alias a nivel raíz del proyecto:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
}

En baseUrl le decimos que la raíz del proyecto es el punto de partida.

En la sección paths, añadimos un alias @/* que apunta a src/*. Esto significa que cualquier importación que empiece con @/ se resolverá como si fuera desde la carpeta src/.

Y en la configuración de Astro, en astro.config.mjs, añadimos el mismo alias:

// @ts-check
import { defineConfig, envField } from "astro/config";
+ import { fileURLToPath } from "url";
+ import { dirname, resolve } from "path";
import tailwindcss from "@tailwindcss/vite";

+ const __filename = fileURLToPath(import.meta.url);
+ const __dirname = dirname(__filename);

// https://astro.build/config
export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
+    resolve: {
+      alias: {
+        "@": resolve(__dirname, "./src"),
+      },
+    },
  },
  env: {

Ya veremos que para importar ficheros de estas carpetas podemos usar el alias @/ seguido de subcarpeta de src que queramos importar.

En el próximo vídeo, abriremos la página principal (index.astro) del proyecto y añadiremos un layout básico para empezar a construir nuestra aplicación.