Estructura del proyecto

Tu nuevo proyecto de Astro generado a partir del asistente CLI de create astro ya incluye algunos archivos y carpetas. Otros los crearás tú mismo y los agregarás a la estructura de archivos existente de Astro.

Así es como se organiza un proyecto de Astro, y algunos archivos que encontrarás en tu nuevo proyecto.

Directorios y archivos

Astro aprovecha un diseño de carpetas estructurado para tu proyecto. Cada raíz de proyecto de Astro debe incluir los siguientes directorios y archivos:

src/* - El código fuente de tu proyecto (componentes, páginas, estilos, imágenes, etc.)
public/* - Tus activos no de código y sin procesar (fuentes, iconos, etc.)
package.json - Un manifiesto del proyecto.
astro.config.mjs - Un archivo de configuración de Astro. (recomendado)
tsconfig.json - Un archivo de configuración de TypeScript. (recomendado)

Árbol de proyecto de ejemplo

Un directorio de proyecto común de Astro podría verse así:

Directoriopublic/
- robots.txt
- favicon.svg
- my-cv.pdf
Directoriosrc/
- Directorioblog/
  - post1.md
  - post2.md
  - post3.md
- Directoriocomponents/
  - Header.astro
  - Button.jsx
- Directorioimages/
  - image1.jpg
  - image2.jpg
  - image3.jpg
- Directoriolayouts/
  - PostLayout.astro
- Directoriopages/
  - Directorioposts/
    [post].astro
  - about.astro
  - index.astro
  - rss.xml.js
- Directoriostyles/
  - global.css
- content.config.ts
astro.config.mjs
package.json
tsconfig.json

`src/`

La carpeta src/ es donde vive la mayor parte del código fuente de tu proyecto. Esto incluye:

Astro procesa, optimiza y empaqueta tus archivos src/ para crear el sitio web final que se envía al navegador. A diferencia del directorio estático public/, tus archivos src/ son compilados y gestionados por Astro.

Algunos archivos (como los componentes de Astro) ni siquiera se envían al navegador tal como están escritos, sino que se renderizan a HTML estático. Otros archivos (como el CSS) se envían al navegador pero pueden ser optimizados o empaquetados con otros archivos CSS para mejorar el rendimiento.

`src/pages`

Las rutas de las páginas se crean para tu sitio agregando tipos de archivos admitidos a este directorio.

`src/components`

Los componentes son unidades de código reutilizables para tus páginas HTML. Estos podrían ser componentes de Astro, o componentes de frameworks de UI como React o Vue. Es común agrupar y organizar todos los componentes de tu proyecto en esta carpeta.

Esta es una convención común en los proyectos de Astro, pero no es obligatoria. ¡Siéntete libre de organizar tus componentes como quieras!

`src/layouts`

Los 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/styles`

Es una convención común almacenar tus archivos CSS o Sass en un directorio src/styles, pero esto no es obligatorio. Mientras tus estilos vivan en algún lugar del directorio src/ y se importen correctamente, Astro se encargará de ellos y los optimizará.

`public/`

El directorio public/ es para archivos y activos de tu proyecto que no necesitan ser procesados durante el proceso de compilación de Astro. Los archivos de esta carpeta se copiarán intactos en la carpeta de compilación, y luego se compilará tu sitio.

Este comportamiento hace que public/ sea ideal para activos comunes que no requieren ningún procesamiento, como algunas imágenes y fuentes, o archivos especiales como robots.txt and manifest.webmanifest.

Puedes colocar CSS y JavaScript en tu directorio public/, pero ten en cuenta que esos archivos no se empaquetarán ni optimizarán en tu compilación final.

`package.json`

Este es un archivo utilizado por los gestores de paquetes de JavaScript para administrar tus dependencias. También define los scripts que se utilizan comúnmente para ejecutar Astro (ej: npm run dev, npm run build).

Hay dos tipos de dependencias que puedes especificar en un package.json: dependencies y devDependencies. En la mayoría de los casos, funcionan igual: Astro necesita todas las dependencias en el momento de la compilación y tu gestor de paquetes instalará ambas. Recomendamos poner todas tus dependencias en dependencies para empezar, y solo usar devDependencies si encuentras una necesidad específica para hacerlo.

Para obtener ayuda al crear un nuevo archivo package.json para tu proyecto, consulta las instrucciones de configuración manual.

`astro.config.mjs`

Este archivo se genera en cada plantilla de inicio e incluye opciones de configuración para tu proyecto de Astro. Aquí puedes especificar las integraciones a usar, opciones de compilación, opciones de servidor y más.

Astro admite varios formatos de archivo para su archivo de configuración de JavaScript: astro.config.js, astro.config.mjs y astro.config.ts. Recomendamos usar .mjs en la mayoría de los casos o .ts si deseas escribir TypeScript en tu archivo de configuración.

La carga del archivo de configuración de TypeScript se maneja utilizando tsm y respetará las opciones de tsconfig de tu proyecto.

Consulta la referencia de configuración para obtener detalles completos.

`tsconfig.json`

Este archivo se genera en cada plantilla de inicio e incluye opciones de configuración de TypeScript para tu proyecto de Astro. Algunas características (como las importaciones de paquetes npm) no son totalmente compatibles en el editor sin un archivo tsconfig.json.

Consulta la guía de TypeScript para obtener detalles sobre la configuración.

Contribuir Comunidad Patrocinar