miércoles 17 julio 2024

¿Cómo es la estructura de un proyecto en Astro?

Directorios y Archivos

Astro adopta una estructura de carpetas organizada de manera predeterminada. Cada proyecto de Astro debería incluir los siguientes directorios y archivos en su raíz:

src/: Contiene el código fuente del proyecto, incluyendo componentes, páginas, estilos, etc.
public/: Almacena activos que no requieren procesamiento, como fuentes e íconos.
package.json: Archivo de manifiesto del proyecto.
astro.config.mjs: Archivo de configuración de Astro (recomendado).
tsconfig.json: Archivo de configuración de TypeScript (recomendado).

Árbol de Proyecto Ejemplo

Una estructura de directorios típica de un proyecto Astro podría verse así:

public/
  ├── robots.txt
  ├── favicon.svg
  └── social-image.png
src/
  ├── components/
  │   ├── Header.astro
  │   └── Button.jsx
  ├── layouts/
  │   └── PostLayout.astro
  ├── pages/
  │   ├── posts/
  │   │   ├── post1.md
  │   │   ├── post2.md
  │   │   └── post3.md
  │   └── index.astro
  └── styles/
      └── global.css
astro.config.mjs
package.json
tsconfig.json

src/

El directorio src/ es donde vive la mayor parte del código fuente del proyecto. Incluye:

Pages: Páginas del sitio.
Layouts: Diseños compartidos por varias páginas.
Components: Componentes reutilizables para las páginas HTML.
UI framework components: Componentes de marcos de interfaz de usuario como React o Vue.
Styles: Archivos de estilos (CSS, Sass).
Markdown: Archivos de contenido en formato Markdown.

Astro procesa, optimiza y agrupa los archivos en src/ para crear el sitio final que se envía al navegador. A diferencia del directorio public/, los archivos en src/ son manejados y construidos por Astro.

src/components

Componentes son unidades de código reutilizables para tus páginas HTML. Pueden ser componentes de Astro o componentes de marcos de UI como React o Vue. Es común agrupar y organizar todos los componentes del proyecto en esta carpeta.

src/content

El directorio src/content/ está reservado para almacenar colecciones de contenido y un archivo opcional de configuración de colecciones. No se permiten otros archivos en esta carpeta.

src/layouts

Layouts son componentes de Astro que definen la estructura de la interfaz de usuario compartida por una o más páginas. Al igual que src/components, este directorio es una convención común pero no es obligatorio.

src/pages

Las páginas son un tipo especial de componente utilizado para crear nuevas páginas en tu sitio. Una página puede ser un componente de Astro o un archivo Markdown que representa algún contenido de la página.

src/styles

Es una convención común almacenar los archivos CSS o Sass en un directorio src/styles, aunque no es obligatorio. Siempre que los estilos se encuentren en algún lugar del directorio src/ y se importen correctamente, Astro los manejará y optimizará.

public/

El directorio public/ es para archivos y activos que no necesitan ser procesados durante el proceso de construcción de Astro. Los archivos en esta carpeta se copian en la carpeta de construcción sin modificaciones. Este comportamiento hace que public/ sea ideal para activos comunes como imágenes y fuentes, o archivos especiales como robots.txt y manifest.webmanifest.

package.json

Este archivo es utilizado por los gestores de paquetes de JavaScript para manejar las dependencias del proyecto. También define los scripts comúnmente usados para ejecutar Astro (por ejemplo, npm start, npm run build).

astro.config.mjs

Este archivo incluye opciones de configuración para tu proyecto Astro, donde puedes especificar integraciones a utilizar, opciones de construcción, opciones del servidor, y más.

tsconfig.json

Incluye opciones de configuración de TypeScript para tu proyecto Astro. Algunas características (como las importaciones de paquetes npm) no están completamente soportadas en el editor sin un archivo tsconfig.json.

Conclusión

La estructura del proyecto en Astro está diseñada para ser intuitiva y fácil de manejar, facilitando el desarrollo de sitios web rápidos y eficientes. Organizar adecuadamente los directorios y archivos según las convenciones mencionadas puede mejorar significativamente el flujo de trabajo y la mantenibilidad del proyecto.

Etiquetas:

javascript astro desarrollo web

Creado por:

Jorge García

Fullstack developer