Structure du Projet

Votre nouveau projet Astro généré à partir de l’assistant de création create astro inclut déjà quelques fichiers et dossiers. D’autres seront créés par vous-même et ajoutés à la structure existante d’Astro.

Voici comment un projet Astro est organisé, ainsi que quelques fichiers que vous trouverez dans votre nouveau projet.

Répertoires et fichiers

Titre de la section Répertoires et fichiers

Astro s’appuie sur une disposition des dossiers propre à chaque projet. La racine de chaque projet Astro doit inclure les répertoires et fichiers suivants :

• src/* - Le code source de votre projet (composants, pages, styles, etc…)
• public/* - Tout ce qui n’est pas du code et/ou des fichiers qui n’ont pas à être traités (polices d’écritures, icônes, etc…)
• package.json - Le manifeste de votre projet.
• astro.config.mjs - Un fichier de configuration d’Astro (recommandé)
• tsconfig.json - Un fichier de configuration TypeScript. (recommandé)

Exemple de structure de projet

Titre de la section Exemple de structure de projet

Un répertoire de projet Astro courant peut ressembler à ceci :

• Répertoirepublic/

  • robots.txt
  • favicon.svg
  • social-image.png
• Répertoiresrc/

  • Répertoirecomponents/

    • Header.astro
    • Button.jsx
  • Répertoirecontent/

    • config.ts
    • Répertoireposts/

      • post1.md
      • post2.md
      • post3.md
  • Répertoirelayouts/

    • PostLayout.astro
  • Répertoirepages/

    • Répertoireposts/

      • [post].astro
    • about.astro
    • index.astro
    • rss.xml.js
  • Répertoirestyles/

    • global.css
• astro.config.mjs
• package.json
• tsconfig.json

src/

Titre de la section src/

Le code source de votre project se trouve dans le dossier src/. Il comprend en général :

• Des composants Pages
• Des composants Layouts
• Des composants Astro
• Des composants Frontend (React, etc…)
• Des fichiers de style (CSS, Sass)
• Du Markdown

Astro traite, optimise et regroupe vos fichiers src/ pour créer le site web final qui est livré au navigateur. Contrairement au répertoire statique public/, les fichiers src/ sont traités et assemblés pour vous par Astro.

Certains fichiers (comme les composants Astro) ne sont pas envoyés au navigateur tels qu’ils sont écrits, mais sont rendus en HTML statique. D’autres fichiers (CSS par exemple) sont envoyés au navigateur, mais peuvent être optimisés ou regroupés avec d’autres fichiers CSS pour améliorer les performances.

Astuce

Bien que ce guide décrive quelques conventions populaires utilisées dans la communauté Astro, les seuls répertoires réservés par Astro sont src/pages/ et src/content/. Vous êtes libre de renommer et de réorganiser les autres répertoires de la manière qui vous convient le mieux.

src/pages

Titre de la section src/pages

Les routes de pages sont créées pour votre site en ajoutant des types de fichiers pris en charge à ce répertoire.

Attention

src/pages est un sous-répertoire obligatoire dans votre projet Astro. Sans lui, votre site n’aura ni pages ni routes !

src/components

Titre de la section src/components

Les composants sont, généralement, du code réutilisable pour vos pages HTML. Ils peuvent être des composants Astro, ou des composants d’interface utilisateur de framework comme React ou Vue. Il est commun de regrouper et d’organiser tous les composants de votre projet dans ce dossier.

C’est une convention courante dans les projets Astro, mais elle n’est pas obligatoire. N’hésitez pas à organiser vos composants comme vous le souhaitez !

src/content

Titre de la section src/content

Le répertoire src/content/ est réservé au stockage des collections de contenu et d’un fichier de configuration. Aucun autre fichier n’est autorisé dans ce répertoire.

src/layouts

Titre de la section src/layouts

Les composants de mise en page sont des composants Astro qui définissent la structure de l’interface partagée par une ou plusieurs pages.

Tout comme src/components, ce répertoire est une convention commune mais n’est pas obligatoire.

src/styles

Titre de la section src/styles

Il est courant de stocker vos fichiers CSS ou Sass dans un répertoire src/styles, mais ce n’est pas obligatoire. Tant que vos styles se trouvent quelque part dans le répertoire src/ et qu’ils sont importés correctement, Astro les gérera et les optimisera.

public/

Titre de la section public/

Le dossier public/ contient les fichiers et les ressources qui n’ont pas besoin d’être traités pendant le processus de construction d’Astro. Les fichiers de ce répertoire seront copiés dans le répertoire de construction sans être modifiés, puis votre site sera construit.

Ce comportement fait du dossier public/ un endroit idéal pour les ressources communes comme des images, polices d’écriture, ou même pour des fichiers spéciaux comme robots.txt et manifest.webmanifest.

Vous pouvez placer des fichiers CSS et JavaScript dans le dossier public/, mais gardez à l’esprit que ces fichiers ne seront pas regroupés et/ou optimisés dans votre construction final.

Astuce

En règle générale, tout CSS ou JavaScript que vous ajoutez devrait être mis dans le dossier src/.

package.json

Titre de la section package.json

C’est un fichier utilisé par les gestionnaires de paquets JavaScript pour gérer vos dépendances. Il définit également les scripts qui sont utilisés pour exécuter Astro (ex: npm start, npm run build).

Il existe deux types de dépendances que vous pouvez spécifier dans le fichier package.json : dependencies et devDependencies. Dans la plupart des cas, elles fonctionnent de la même manière : Astro a besoin de toutes les dépendances au moment de la construction, et votre gestionnaire de paquets les installera toutes les deux. Nous recommandons de mettre toutes vos dépendances dans dependencies pour commencer, et de n’utiliser devDependencies que si vous avez un besoin spécifique.

Pour plus d’informations en ce qui concerne la création d’un nouveau fichier package.json pour votre projet, consultez les instructions de configuration manuelle.

astro.config.mjs

Titre de la section astro.config.mjs

Ce fichier est généré dans chaque modèle de démarrage et contient des options de configuration pour votre projet Astro. Ici, vous pouvez spécifier les intégrations à utiliser, les options de construction, les options du serveur, et plus encore.

Astro prend en charge plusieurs formats de fichiers pour son fichier de configuration JavaScript : astro.config.js, astro.config.mjs, astro.config.cjs et astro.config.ts. Nous vous recommandons d’utiliser .mjs dans la plupart des cas ou .ts si vous souhaitez utiliser TypeScript dans votre fichier de configuration.

Le chargement du fichier de configuration TypeScript est géré à l’aide de tsm et respectera les options tsconfig de votre projet.

Allez voir la documentation de configuration pour plus d’informations sur les options de configuration.

tsconfig.json

Titre de la section tsconfig.json

Ce fichier est généré dans chaque modèle de démarrage et comprend des options de configuration TypeScript pour votre projet Astro. Certaines fonctionnalités (comme les importations de paquets npm) ne sont pas entièrement prises en charge dans l’éditeur sans un fichier tsconfig.json.

Voir le Guide TypeScript pour plus de détails sur le paramétrage des configurations.