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:

Directorypublic/
- robots.txt
- favicon.svg
- social-image.png
Directorysrc/
- Directorycomponents/
  - Header.astro
  - Button.jsx
- Directorycontent/
  - config.ts
  - Directoryposts/
    post1.md
    post2.md
    post3.md
- Directorylayouts/
  - PostLayout.astro
- Directorypages/
  - Directoryposts/
    [post].astro
  - about.astro
  - index.astro
  - rss.xml.js
- Directorystyles/
  - global.css
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 oder mit anderen CSS-Dateien gebündelt werden.

`src/pages`

Seitenrouten werden für deine Website erstellt, indem du unterstützte Dateitypen zu diesem Verzeichnis hinzufügst.

`src/components`

Komponenten sind wiederverwendbare Code-Einheiten für deine HTML-Seiten. Das können Astro-Komponenten oder UI-Framework-Komponenten wie React oder Vue sein. Es ist üblich, dass du alle Komponenten deines Projekts in diesem Ordner zusammenfasst und organisierst.

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

`src/content`

Das Verzeichnis src/content/ ist für die Speicherung von Inhaltssammlungen (EN) und einer Konfigurationsdatei reserviert. Andere Dateien sind in diesem Verzeichnis nicht erlaubt.

`src/layouts`

Layouts sind Astro-Komponenten, welche die UI-Struktur definieren, die von einer oder mehreren Seiten gemeinsam genutzt wird.

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

`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. Die Dateien in diesem Ordner werden unverändert in den Build-Ordner kopiert, und dann wird deine Website gebaut.

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 (EN).

`astro.config.mjs`

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

Astro unterstützt mehrere Dateiformate für seine JavaScript-Konfigurationsdatei: astro.config.js, astro.config.mjs, astro.config.cjs und astro.config.ts. Wir empfehlen, in den meisten Fällen .mjs oder .ts zu verwenden, wenn du TypeScript in deiner Konfigurationsdatei schreiben willst.

Das Laden von TypeScript-Konfigurationsdateien wird mit tsm gehandhabt und berücksichtigt die tsconfig-Optionen deines Projekts.

In der Astro-Konfigurationsanleitung findest du weitere Informationen zum Einstellen der Konfigurationen.

`tsconfig.json`

Diese Datei wird von jeder Starter-Vorlage generiert und enthält TypeScript-Konfigurationsoptionen 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.

Wirke mit

Community