Zum Inhalt springen
Astro Astro

Projektstruktur

Dein neues Astro-Projekt, welches vom CLI-Assistenten create-astro erstellt wurde, enthält bereits einige Dateien und Verzeichnisse. Alle weiteren Inhalte erstellst du selbst und fügst sie zur bestehenden Verzeichnisstruktur von Astro hinzu.

Hier erfährst du, wie ein Astro-Projekt grundsätzlich organisiert ist, und welche Dateien du in deinem neuen Projekt vorfindest.

Verzeichnisse und Dateien

Astro nutzt einige fest vorgegebene Verzeichnisse, um dein Projekt zu strukturieren. Das Stammverzeichnis jedes Astro-Projekts sollte die folgenden Verzeichnisse und Dateien enthalten:

  • src/* - Der Quellcode deines Projekts (Komponenten, Seiten, Stile usw.)
  • public/* - Nicht zu verarbeitende Inhalte, die kein Quellcode sind (Schriftarten, Symbole usw.)
  • package.json - Die Projektdatei deines Paketmanagers
  • astro.config.mjs - Eine Astro-Konfigurationsdatei (wird empfohlen)
  • tsconfig.json - Eine TypeScript-Konfigurationsdatei (wird empfohlen)

Beispiel-Verzeichnisbaum

Ein typischer Astro-Verzeichnisbaum könnte so aussehen:

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

src/

Im src/-Verzeichnis befindet sich der Großteil deines Projektquellcodes. Dieser beinhaltet Folgendes:

Astro verarbeitet, optimiert und bündelt deine Dateien in src/, um die endgültige Website zu erstellen, die an den Browser gesendet wird. Im Gegensatz zum statischen public/-Verzeichnis werden deine src/-Dateien von Astro für dich verarbeitet und optimiert:

Einige Dateien (z.B. Astro-Komponenten) werden gar nicht so an den Browser gesendet, wie du sie geschrieben hast, sondern stattdessen in statisches HTML gerendert. Andere Dateien (z.B. CSS) werden zwar an den Browser gesendet, können aber zur Leistungsverbesserung vorher optimiert und mit anderen CSS-Dateien gebündelt werden.

src/components

Komponenten sind wiederverwendbare Quellcode-Einheiten, die du beliebig oft auf deinen Seiten einsetzen kannst. Du kannst sowohl Astro-Komponenten als auch UI-Framework-Komponenten aus Frameworks wie React oder Vue verwenden. Es ist üblich, alle Komponenten eines Projekts in diesem Ordner zu gruppieren und zu organisieren.

Diese Vorgehensweise ist in Astro-Projekten üblich, aber nicht zwingend erforderlich. Du kannst deine Komponenten gerne auch anders organisieren!

src/layouts

Layouts sind spezielle Komponenten, die deine Inhalte in ein übergeordnetes Seitenlayout einbinden. Sie werden meistens verwendet, um das umgebende Layout von Astro-Seiten und Markdown- oder MDX-Seiten festzulegen.

Genau wie bei src/components ist die Nutzung dieses Verzeichnisses in Astro-Projekten üblich, aber nicht zwingend erforderlich.

src/pages

Seiten sind spezielle Komponenten, die verwendet werden, um neue Seiten auf deiner Website zu erstellen. Es kann sich dabei um eine Astro-Komponente oder eine Markdown-Datei handeln, die den Inhalt einer Seite auf deiner Website repräsentiert.

src/styles

Es ist eine übliche Vorgehensweise, deine CSS- oder Sass-Stile im Verzeichnis src/styles zu speichern, es ist aber nicht zwingend erforderlich. So lange deine Stile sich irgendwo innerhalb des src/-Verzeichnisses befinden und korrekt importiert werden, wird Astro sie verarbeiten und optimieren.

public/

Das Verzeichnis public/ ist für Dateien und Inhalte vorgesehen, die Astro während des Buildvorgangs nicht verarbeiten muss. Diese Dateien werden während des Buildvorgangs unverändert in das Ausgabeverzeichnis kopiert.

Dieses Verhalten macht public/ ideal für verbreitete Inhalte wie Bilder und Schriftarten, sowie für besondere Dateien wie robots.txt und manifest.webmanifest.

Du kannst zwar auch CSS- und JavaScript-Dateien in public/ speichern, beachte aber bitte, dass diese dann während des Buildvorgangs weder gebündelt noch optimiert werden.

package.json

Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen Pakete (“Abhängigkeiten”) eines Projekts zu verwalten. Sie definiert auch die Skripte, die üblicherweise dazu verwendet werden, um Astro auszuführen (z.B. npm start, npm run build).

Es gibt zwei Arten von Abhängigkeiten, die du in deiner package.json-Datei festlegen kannst: dependencies und devDependencies. In den meisten Fällen funktionieren sie auf die gleiche Weise: Astro benötigt zum Erzeugungszeitpunkt alle Abhängigkeiten, und auch dein Paketmanager wird beide Arten installieren. Wir empfehlen dir, all deine Abhängigkeiten zunächst in dependencies einzutragen, und devDependencies nur zu verwenden, wenn dein spezieller Anwendungsfall es erfordert.

Eine Anleitung zur Erstellung einer neuen package.json-Datei für dein Projekt findest du auf der Seite Manuelle Installation von Astro.

astro.config.mjs

Diese Datei wird von jeder Starter-Vorlage generiert und enthält Konfigurations­optionen für dein Astro-Projekt. Hier kannst du die zu verwendenden Integrationen, Build-Optionen, Serveroptionen und mehr angeben.

Weiterführende Informationen zu den Einstellungen findest du in der Anleitung zur Konfiguration von Astro.

tsconfig.json

Diese Datei wird von jeder Starter-Vorlage generiert und enthält TypeScript-Konfigurations­optionen für dein Astro-Projekt. Ohne eine tsconfig.json-Datei werden im Editor einige Funktionalitäten (z.B. das Importieren von NPM-Paketen) noch nicht völlig unterstützt.

Weiterführende Informationen zu den TypeScript-Einstellungen findest du in der Anleitung zur Konfiguration von TypeScript.