Skip to content
Astro Workshop

Installation

  • Stelle sicher, dass Du mindestens Node 18 installiert hast.

Astro Projekt generieren

Wenn generieren zunächst ein Astro Projekt, dass für den gesamten Workshop verwenden werden.

Führe folgenden Befehl aus, um den Astro Wizard zu starten.

Terminal window
npm create astro@latest

Stelle sicher, dass du folgende Optionen im Wizard auswählst:

  • Where should we create your new project? -> ./astro
  • How would you like to start your new project? -> Empty
  • Do you plan to write TypeScript? -> Yes
  • Install dependencies? -> Yes
  • Initialize a new git repository? -> No

Projekt starten

Navigiere in den neu generierten astro/ Ordnder und führe das dev script aus.

Terminal window
npm run dev

Wenn alles korrekt ist, solltest du die eine Seite mit dem Text Astro sehen, wenn Du die folgende URL öffnest:
http://localhost:4321/

Editor Unterstüzung

Um besser mit Astro in deinem Editor arbeiten zu können, empfiehlt sich es ein Plugin bzw. LSP Unterstützung zu installieren. Die beste IDE Unterstützung für Astro bietet VSCode. Wir empfehlen daher für den Workshop VSCode zu verwenden.

VSCode

Gehe zum Extensions Tab und suche nach astro-build.astro-vscode. Installiere die gefundene Extension (vom verified Author Astro) und mache einen Reload des Editors.

IntelliJ / WebStorm

Für Jetbrains IDEs gibt es folgendes Astro Plugin: https://plugins.jetbrains.com/plugin/20959-astro
Wir haben alpraktische lerdings keine Erfahrungen, wie gut das Plugin in der Praxis funktionert.

Neovim

Falls du Neovim/Mason verwendest, kannst Du bei Mason nach Languages filtern und dort einfach nach Astro suchen. Dort solltest du dann den astro-language-server installieren können.