Astro – Eine Einführung in dein nächstes Projekt

Dass wir von Astro und seinen Features begeistert sind, ist spätestens seit unserem Colophon bekannt. Als statischer Seitengenerator (SSG) stellt Astro unsere Inhalte über das integrierte Collections-Feature für unsere Besucher:innen bereit und gibt uns durch die einfache Bedienung die Möglichkeit, uns auf unsere Inhalte zu konzentrieren.

In diesem Artikel zeigen wir dir – wie angekündigt – wie man mit Astro eine eigenes Projekt aufsetzt und veröffentlicht.

Dieser Artikel setzt ein gewisses Maß an Kenntnissen in den Bereichen HTML, CSS und JavaScript voraus und ist daher nicht unbedingt für Anfänger geeignet.

Installation

Bevor wir mit der Installation beginnen, benötigen wir Node.js 20 oder höher und den Code Editor deiner Wahl. Sind diese Anforderungen getroffen, hast du die Wahl zwischen zwei Installationswegen:

1. Unsere eigene Astro Boilerplate mit vorkonfigurierter Unterstützung für TypeScript, TailwindCSS und vielen weiteren Features oder…
2. … einer manuellen Installation über den Astro Setup Wizard.

Für diesen Artikel verwenden wir unsere Boilerplate, auf deren Eigenschaften wir weiter unten näher eingehen werden.

Astro Boilerplate

Du hast dich für unsere Boilerplate entschieden? Toll. Klicke auf den folgenden Button, um das Projekt herunterzuladen und zu entpacken.

Du bevorzugst eine Installation nach deinen Wünschen? Dann folge der manuellen Installation.

Manuelle Installation

Wenn du die Boilerplate bereits heruntergeladen hast, überspringe diesen Schritt.

Führe den folgenden create Befehl im Terminal aus, um den praktischen Setup Wizard von Astro zu starten und mit der Konfiguration deines Projekts zu beginnen:

npm create astro@latest

Installation benötigter Pakete

Wenn du dich für die Boilerplate entschieden hast oder den Installationsschritt für npm im Setup Wizard übersprungen hast, musst du die benötigten Pakete im Projektverzeichnis installieren, bevor du fortfahren kannst:

npm install

Astro starten

Um Astro zu starten, führst du den folgenden dev Befehl im Projektverzeichnis aus:

npm run dev

Unter der im Terminal angezeigten URL – in der Regel http://localhost:4321/ – findest du deine neue Website. Auf unserer Boilerplate begrüßt dich folgende Willkommensseite:

Wenn du den manuellen Installationsschritt gewählt hast, hängt die anfängliche Darstellung der Startseite vom gewählten Template ab.

Die folgenden Abschnitte beziehen sich ausschließlich auf die von uns bereitgestellte Boilerplate. Wenn du dich für eine manuelle Installation entschieden hast, steht dir die ausgezeichnete Dokumentation von Astro zur Verfügung, oder du kannst direkt zum Abschnitt Deployment springen, wenn du bereits mit Astro vertraut bist.

Konfiguration

Unsere Boilerplate bietet standardmäßig mehrere Konfigurationsmöglichkeiten und liefert bereits einige vorkonfigurierte Optionen für die folgenden Tools.

Astro

astro.config.ts ist vorab mit Unterstützung für MDX und TailwindCSS konfiguriert.

export default defineConfig({
  srcDir: ".",
  integrations: [
    mdx(),
    tailwind({
      applyBaseStyles: false,
    }),
  ],
});

Weitere Integrationen und Frameworks können über astro add hinzugefügt werden. Mehr dazu im Abschnitt Interaktivität.

Alpine.js

Für die grundlegende Interaktivität ist Alpine.js installiert und folgt unserer Konfiguration, die wir bereits im Artikel Temporäres und persistentes State Management mit Alpine.js vorgestellt haben.

export const app = () => ({
  // ...

  // init() {
  //   console.log('Hello World')
  // }
});

app wird in die Datei scripts/globals.ts importiert, initiiert und über das Layout <Root> global eingebunden.

TailwindCSS

Styles können mit zwei Tools definiert werden: TailwindCSS und SCSS.

tailwind.config.ts verwendet das Theming von shadcn/ui und ein vorkonfiguriertes Theme für @tailwindcss/typography.

Die CSS-Variablen der Styles sind in der Datei styles/globals.scss definiert und bieten über die CSS Media Query prefers-color-scheme eine Voreinstellung für Dark- oder Light-Mode.

Seiten, Komponenten und Layouts

Wir stellen bereits die Seite pages/index.astro zur Verfügung. Sie verwendet das Layout <Root> und enthält die Komponente <Welcome />.

Seiten

pages/index.astro ist deine Startseite und enthält neben der Willkommensseite nur das Layout deiner zukünftigen Seite.

Über die Konstante meta kannst du die Metadaten der entsprechenden Seite verwalten und diese Informationen an das Layout <Root> übergeben. Folgende Metadaten stehen dir zur Verfügung:

interface Props {
  meta: {
    title?: string;
    description?: string;
    image?: {
      src: string;
      alt?: string;
    };
  };
}

Komponenten

Die Boilerplate wird mit einigen praktischen Komponenten geliefert, die den Einstieg in die Umsetzung erleichtern:

• <Footer /> – Leere Komponente für die Eibindung eines eigenen Footers

• <Meta> – Stellt gängige Metadaten dar. Erlaubt die Erweiterung mit <slot />

• <Navigation> – Leere Komponente für die Eibindung einer eigenen Navigation

• <Welcome /> – Beispielkomponente, die die Änderungen am Projekt widerspiegelt

Layouts

Das <Root> Layout ist für jede Seite essentiell und beinhaltet auch Alpine.js und die Komponenten <Navigation /> und <Footer />.

Außerdem enthält das Layout die Komponente <Meta>, die unsere in den Seiten definierten Metadaten empfängt. In dieser Komponente befindet sich auch der Standardtitel der Seite.

Interaktivität

Wie bereits im Abschnitt Konfiguration vorgestellt, nutzt unsere Boilerplate Alpine.js für ein grundlegendes Maß an Interaktivität.

Für anspruchsvollere Anwendungen empfehlen sich die von Astro integrieten Lösungen für diverse Frameworks wie React, Vue oder Svelte.

Frontend Frameworks

Aufgrund unserer Konfiguration sind die folgenden zwei Frameworks und Komponenten besonders für die Verwendung in unserer Boilerplate geeignet:

• Pines – eine UI-Bibilothek basierend auf Alpine und Tailwind
• shadcn/ui -eine UI-Bibiliothek basierend auf React, Radix und Tailwind

Bei der Verwendung von shadcn/ui sind die Regeln von Astro für die Hydrierung von Komponenten zu beachten.

Deployment

Wenn du deine eigene Seite erstellt hast, musst du sie nur noch veröffentlichen. Am einfachsten geht das mit einer statisch generierten Seite.

Grundsätzlich bist du an keinen Hosting-Provider gebunden und hast die Wahl, wie du deine Seite veröffentlichen möchtest.

Lokal

Viele Provider bieten Services für das Deplyoment deiner seite. Jedoch kannst du deine Seite auch lokal kompilieren. Dafür nutzt du den allgemeinen build Befehl:

npm run build

Standardmäßig findest du deine fertig kompilierte Seite im Verzeichnis dist/. Jetzt musst du deine Seite nur noch bei deinem Provider hochladen und schon ist dein erstes Projekt online.

Services

Astro unterstützt viele Provider von Haus aus und ohne weitere Konfiguration. Prominente Beispiele hierbei sind Cloudflare und Vercel, die den Deployment-Prozess in einem simplen Dialog erklären und ausführen.

Neben der statischen Seitengenerierung unterstützen viele Provider auch Server-side Rendering (SSR) für Astro. Laut Astros eigener Dokumentation ermöglicht SSR den Zugriff auf folgende Funktionen:

• Sessions für den Anmeldestatus in der Anwendung implementieren
• Daten aus einer dynamisch aufgerufenen API mit fetch rendern.
• Seiten mit einem Adapter auf einem Host bereit stellen.

Für einfache und überschaubare Projekte, die nicht auf externe Ressourcen angewiesen sind, empfiehlt sich die Verwendung von SSG. Ist das Projekt anspruchsvoller, ist es ratsam, sich mit SSR zu befassen, um die benötigten Ressourcen nach eigenen Vorstellungen zu integrieren.

TL;DR

Astro in Kombination mit unserer Boilerplate gibt dir die Werkzeuge und die Flexibilität, dein nächstes Projekt nach deinen Vorstellungen anzugehen. Von dem Setup bis zum Deployment begleiten wir dich in diesem Artikel.