Instalación de Astro

Utilizar Astro es muy sencillo, pero hay que tener una serie de conceptos claros. Veamos a continuación dichos requisitos:

Requisitos para usar Astro

Para utilizar Astro debemos cumplir una serie de requisitos muy sencillos:

• Node 22 o superior (también 18.20.8+ o 20.3.0+). Recomiendo instalar pnpm.
• Acceso a una Terminal. Si usas Windows, recomiendo WSL2.
• Recomendable utilizar Astro extensión si usas VSCode.

Si cumples estos requisitos, puedes seguir.

Instalación de Astro

Para crear un proyecto con Astro, simplemente nos colocamos en la carpeta de nuestros proyectos, por ejemplo cd /home/manz/workspaces y ejecutamos el siguiente comando:

$ npm create astro@latest

 astro   Launch sequence initiated.

╭─────╮  Houston:
│ ◠ ◡ ◠  Welcome to  astro  v5.9.3, ManzDev!
╰─────╯

Esto disparará un asistente que nos irá preguntando, entre otras cosas:

• 1️⃣ Nombre de la carpeta del proyecto. Ejemplo: ./nombre-del-proyecto.
• 2️⃣ Plantilla a utilizar. Yo suelo recomendar el último: plantilla minimalista.
• 3️⃣ Instalar dependencias. Sí. En caso contrario (o si falla) sólo es hacer un npm install.
• 4️⃣ Inicializar un nuevo repositorio git. En general, sí. Salvo que ya lo tengamos creado.

Recuerda: Usa minúsculas para el nombre de la carpeta del proyecto y piensa que en el futuro, esta será el nombre del repositorio de GitHub.

Esto hará que comience a trabajar. Puede tardar un poco, dependiendo de nuestra conexión a Internet y la potencia de nuestro equipo. Habrá terminado cuando veamos esto en la terminal y nos devuelva el prompt para seguir escribiendo en la terminal:

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

$

Estructura del proyecto

Si todo ha ido bien, sólo tenemos que entrar en la carpeta creada (con el nombre que le hemos definido) y observar la estructura de carpetas y ficheros:

$ cd nombre-del-proyecto

$ tree
 📁 nombre-del-proyecto
  ├─📁 src
  │  └─📁 pages
  ├─📁 public
  │  └─📃 favicon.svg
  ├─📃 README.md
  ├─📃 astro.config.mjs
  ├─📃 tsconfig.json
  ├─📃 package.json
  └─📃 pnpm-lock.yaml

De momento, localicemos las partes importantes:

• 1️⃣ Los ficheros astro.config.mjs, package.json y tsconfig.json son los que tienen las configuraciones principales. Las veremos más adelante.
• 2️⃣ La carpeta public incluirá ciertos ficheros estáticos como imágenes, tipografías, sonidos, etc...
• 3️⃣ La carpeta src es la que incluirá el código fuente de nuestro proyecto.
• 4️⃣ Dentro de src hay una carpeta llamada pages, ahí es donde empezaremos a crear nuestro proyecto.

Comandos de Astro

Para trabajar con Astro, es bueno que tengamos en cuenta ciertos comandos que funcionan de atajo:

• 1️⃣ code .: Abre VSCode con el proyecto de la carpeta actual. Ideal para comenzar a trabajar.
• 2️⃣ npm run dev: Abre un servidor local para ver como va quedando la web en tiempo real.
• 3️⃣ npm run build: Crea la web final para desplegar en un servicio de hosting o alojamiento.

Vamos a profundizar en algunos aspectos básicos más para entender como funciona todo.