Erstellung des AstroJS-Basisprojekts

In diesem Tutorial lernst du, wie du dein erstes Projekt mit AstroJS erstellst. Wir nutzen das Tool npm create astro, um eine Serveranwendung zu generieren, die mit der OpenAI API interagieren kann. Du wirst die Struktur des generierten Projekts erkunden und einen kurzen Überblick darüber erhalten, wie du es in Betrieb nehmen kannst. Lass uns gleich loslegen!

Wichtigste Erkenntnisse

• Die Erstellung eines neuen Projekts in AstroJS ist einfach und wird durch einen interaktiven Wizard unterstützt.
• Die Projekterstellung umfasst die Konfiguration von Dependencies (NPM Module) und die Festlegung des Projektnamens.
• Die integrierte Hot-Reload-Funktion von AstroJS ermöglicht es dir, Änderungen in Echtzeit zu sehen, ohne die Seite manuell neu laden zu müssen.

Schritt-für-Schritt-Anleitung

Um dein AstroJS-Projekt aufzusetzen, gehe wie folgt vor:

Zuerst solltest du dein Terminal öffnen. Stelle sicher, dass du in der Lage bist, Befehle auszuführen. Der erste Schritt besteht darin, den Befehl npm create astro einzugeben. Dieser Befehl startet einen Wizard, der dir durch die Erstellung des neuen Projekts hilft. 

Beim Start des Wizards wirst du möglicherweise aufgefordert, die Installation eines bestimmten npm-Pakets zu bestätigen. Wenn du dazu aufgefordert wirst, bestätige die Installation.

Anschließend wirst du nach einem Namen für dein neues Projekt gefragt. In unserem Fall nenne ich das Projekt einfach ai-chat. Gib den gewünschten Namen ein und drücke die Eingabetaste.

Der Wizard fragt dann, ob du Beispiel-Dateien (sample files) installieren möchtest. Da wir das nicht benötigen, wähle n für „nein“ und fahre fort.

Der nächste Schritt ist die Installation der notwendigen Dependencies. Du wirst gefragt, ob du die entsprechenden npm-Module direkt installieren möchtest. Es wird empfohlen, dies zu bejahen, um den Installationsprozess zu automatisieren.

Nachdem die Dependencies installiert sind, fragt der Wizard, ob du TypeScript verwenden möchtest. Es wird empfohlen, die Verwendung von TypeScript abzulehnen, da dies die Komplexität erhöhen kann. Du kannst jederzeit später TypeScript hinzufügen, falls du es benötigst.

Ein weiterer Schritt ist die Entscheidung, ob du ein initiales Repository verwenden möchtest. In der Regel ist dies zu Beginn nicht notwendig, also wähle auch hier n für „nein“.

Sobald alle Fragen beantwortet sind, erhältst du eine nette Abschlussnachricht des Wizards. Mit dieser Bestätigung ist der grundlegende Teil des Projekts nun abgeschlossen.

Jetzt werfen wir einen Blick auf die Struktur des erzeugten Projekts. Wechsle in das Projektverzeichnis mit cd ai-chat, um die erstellte Struktur zu erkunden.

Du kannst die Struktur des Projekts mit dem Befehl tree anzeigen. Dies gibt dir einen Überblick, welche Dateien und Ordner erstellt wurden.

In deinem Projektverzeichnis findest du unter src die eigentlichen Astro-Quellcodes. Hier ist die Datei index.astro, die als deine Startseite fungiert und wir werden uns damit gleich befassen.

Um dein Astro-Projekt lokal zum Laufen zu bringen, musst du ein Skript aufrufen. Verwende den Befehl npm run dev. Dieser Befehl startet einen Entwicklungsserver, der die Anwendung bereitstellt.

Sobald der Entwicklungsserver läuft, wird dir eine Adresse angezeigt, in der Regel localhost:3000. Du kannst diese Adresse in deinem Webbrowser öffnen, um die Anwendung anzuzeigen.

Du kannst die Adresse kopieren und in den Browser einfügen. Alternativ kannst du einen Steuerungsklick (oder Command-Klick auf Mac) auf die Adresse im Terminal machen, um sie direkt im Browser zu öffnen.

Wenn alles korrekt eingerichtet ist, solltest du deine Astro-Seite sehen, die zeigt, dass der Server erfolgreich läuft.

Um zu demonstrieren, wie einfach es ist, Änderungen vorzunehmen, kannst du den Text innerhalb von index.astro ändern. Lass uns den Text auf ai Chatbot ändern und im Browser überprüfen, ob die Änderung sichtbar ist.

Nachdem du die Änderung gespeichert hast, wird die Seite im Browser automatisch aktualisiert, ohne dass du sie manuell neu laden musst. Das ist eine der großartigen Funktionen von AstroJS!

Diese Hot-Reload-Funktion ermöglicht es dir, Änderungen in Echtzeit zu sehen, was den Entwicklungsprozess erheblich beschleunigt.

Dein erstes Astro-Projekt ist nun funktionsbereit und du kannst weitere Anpassungen vornehmen oder darauf aufbauen. Die index.astro-Datei wird in eine HTML-Seite konvertiert und an den Browser ausgeliefert. Du kannst nun mit der Entwicklung beginnen und neue Features hinzufügen.

Bis zum nächsten Mal, wenn wir die nächsten Schritte in diesem spannenden Projekt erkunden!

Zusammenfassung

In diesem Tutorial hast du gelernt, wie du mit npm create astro ein neues AstroJS-Projekt erstellst. Von der Installation der Dependencies bis zur Verwendung des Hot-Reloads hast du alle grundlegenden Schritte durchlaufen, um deine erste Astro-Seite zum Laufen zu bringen.