Structure du Projet

Votre tout nouveau projet Astro généré à partir de l’assistant de création create astro possède déjà quelques fichiers et dossiers. En ce qui concerne les autres fichiers, vous pourrez les créer vous-même et les ajouter à la structure de fichiers d’Astro.

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

Astro promeut une certaine façon d’organiser vos dossiers dans votre projet. 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 (optionnel)
• tsconfig.json - Un fichier de configuration TypeScript. (recommandé)

Un projet Astro assez commun peut ressembler à ça :

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 les fichiers src/ pour créer le site web final qui est délivré au navigateur. Contrairement au répertoire statique public/, les fichiers src/ sont traités et assemblés pour vous par Astro.

Quelques fichiers (comme les composants Astro) ne sont pas envoyés au navigateur tel quel, mais plutôt en temps qu’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.

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

C’est une convention commune dans les projets Astro, mais elle n’est pas obligatoire. Organisez vos composants comme vous le voulez, si vous le souhaitez !

Les composants Layouts sont des types de composants particuliers qui s’appliquent à des pages. Ils sont généralement utilisés par les Pages Astro et les Pages Markdown pour définir leur mise en page.

Comme src/components, organisez vos composants Layouts comme vous le souhaitez, ils ne sont pas obligatoires.

Les composants Pages sont des types de composants particuliers utilisés pour créer de nouvelles pages. Une Page peut être un composant Astro (.astro) ou un fichier Markdown (.md) qui représente une page de contenu pour votre site.

C’est une convention commune de stocker vos fichiers CSS ou Sass dans le dossier src/styles, mais ce n’est pas obligatoire. Du moment que vos fichiers de style sont quelque part dans le dossier src/, Astro va les gérer et les optimiser.

Le dossier public/ est là pour les fichiers et les ressources qui n’ont pas besoin d’être traités durant le processus de compilation d’Astro. Ces fichiers seront copiés dans le dossier de compilation sans modification.

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 build final.

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 un package.json : dependencies et devDependencies. Dans la plupart des cas, ils 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. Nous vous recommandons de mettre toutes vos dépendances dans dependencies pour commencer, et de n’utiliser devDependencies que si vous en éprouvez le 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.

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 compilation, les options du serveur, et plus encore.

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

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.