Erste Schritte mit Gatsby.js unter Windows

Ein Leitfaden zum Installieren des Gatsby.js-Webframeworks und zum Einstieg in Windows.

Gatsby.js ist ein statisches Websitegeneratorframework, das auf React.jsbasiert und nicht wie Next.jsvom Server gerendert wird. Ein statischer Websitegenerator erzeugt statisches HTML während der Build-Zeit. Es ist kein Server erforderlich. Next.js generiert HTML zur Laufzeit (jedes Mal, wenn eine neue Anfrage eingeht) und dabei muss ein Server ausgeführt werden. Gatsby bestimmt auch, wie Daten in Ihrer App (mit GraphQL) behandelt werden, während Next.js Ihnen diese Entscheidung überlässt.

Weitere Informationen zu React und anderen JavaScript-Frameworks, die auf React basieren, finden Sie auf der Seite Übersicht über React.

Voraussetzungen

In dieser Anleitung wird davon ausgegangen, dass Sie bereits die Schritte zum Einrichten der Node.js-Entwicklungsumgebung abgeschlossen haben. Dazu gehören:

• Installieren Sie die neueste Version von Windows 10 (Version 1903 und höher, Build 18362 und höher) oder Windows 11.
• Installieren Sie das Windows-Subsystem für Linux (WSL), einschließlich einer Linux-Distribution (z. B. Ubuntu), und stellen Sie sicher, dass es im WSL 2-Modus ausgeführt wird. Sie können dies überprüfen, indem Sie PowerShell öffnen und Folgendes eingeben: wsl -l -v
• Install Node.js auf WSL 2: Dies umfasst einen Versionsmanager, Paketmanager, Visual Studio Code und die Erweiterung für Remote-Entwicklung.

Wir empfehlen die Verwendung des Windows-Subsystems für Linux bei der Arbeit mit NodeJS-Apps für eine bessere Leistungsgeschwindigkeit, Systemaufrufkompatibilität und für Parodie beim Ausführen von Linux-Servern oder Docker-Containern.

Von Bedeutung

Wenn Sie eine Linux-Distribution mit WSL installieren, wird ein Verzeichnis zum Speichern von Dateien erstellt: \\wsl\Ubuntu-20.04 (Ersetzen Sie Ubuntu-20.04 durch die Linux-Distribution, die Sie verwenden). Um dieses Verzeichnis im Windows-Datei-Explorer zu öffnen, öffnen Sie die WSL-Befehlszeile, wählen Sie Ihr Startverzeichnis mithilfe von cd ~aus, und geben Sie dann den Befehl explorer.exe . ein. Achten Sie darauf, Node.js nicht zu installieren oder Dateien, an denen Sie arbeiten werden, auf dem bereitgestellten C-Laufwerk zu speichern (/mnt/c/Users/yourname$). Dadurch werden die Installations- und Bauzeiten deutlich verlangsamt.

Installiere Gatsby.js

So erstellen Sie ein Gatsby.js Projekt:

1. Öffnen Sie Ihr WSL-Terminal (dh. Ubuntu).

2. Erstellen Sie einen neuen Projektordner: mkdir GatsbyProjects Und geben Sie dieses Verzeichnis ein: cd GatsbyProjects

3. Verwenden Sie npm, um die Gatsby CLI zu installieren: npm install -g gatsby-cli. Überprüfen Sie nach der Installation die Version mit gatsby --version.

4. Erstellen Sie Ihr Gatsby.js-Projekt: gatsby new my-gatsby-app

5. Nachdem das Paket installiert wurde, ändern Sie Verzeichnisse in Ihren neuen App-Ordner, cd my-gatsby-app, und verwenden Sie dann code ., um Ihr Gatsby-Projekt in VS Code zu öffnen. Auf diese Weise können Sie sich das Gatsby.js Framework ansehen, das für Ihre App mithilfe des Datei-Explorers von VS Code erstellt wurde. Beachten Sie, dass VS Code Ihre App in einer WSL-Remote-Umgebung geöffnet hat (worauf die grüne Registerkarte unten links in Ihrem VS Code-Fenster hinweist). Dies bedeutet, dass während Sie VS Code zur Bearbeitung auf dem Windows-Betriebssystem verwenden, Ihre App weiterhin auf dem Linux-Betriebssystem läuft.

   

6. Es gibt drei Befehle, die Sie wissen müssen, sobald Gatsby installiert ist:

   • gatsby develop zum Ausführen einer Entwicklungsinstanz mit hot-reloading.
   • gatsby build zum Erstellen eines Produktions-Builds.
   • gatsby serve zum Starten der App im Produktionsmodus.

   Öffnen Sie das in VS Code integrierte WSL-Terminal (View > Terminal). Vergewissern Sie sich, dass der Terminalpfad auf das Projektverzeichnis verweist (d. h. ~/GatsbyProjects/my-gatsby-app$). Probieren Sie, eine Entwicklungsinstanz Ihrer neuen App zu starten, indem Sie: gatsby develop

7. Sobald das neue Gatsby-Projekt die Kompilierung abgeschlossen hat, wird Ihr Terminal angezeigt.You can now view gatsby-starter-default in the browser. http://localhost:8000/ Wählen Sie diesen localhost-Link aus, um Ihr neues Projekt anzuzeigen, das in einem Webbrowser erstellt wurde.

Hinweis

Sie werden feststellen, dass Ihre Terminalausgabe Ihnen auch mitteilt, dass Sie "GraphiQL, eine im Browser integrierte Entwicklungsumgebung (IDE), anzeigen können, um die Daten und das Schema Ihrer Website zu untersuchen: http://localhost:8000/___graphql." GraphQL konsolidiert Ihre APIs in eine selbst dokumentierende IDE (GraphiQL), die direkt in Gatsby eingebaut ist. Zusätzlich zur Untersuchung der Daten und des Schemas Ihrer Website können Sie GraphQL-Vorgänge wie Abfragen, Mutationen und Abonnements ausführen. Weitere Informationen finden Sie unter Einführung in GraphiQL.

8. Öffnen Sie die src/pages/index.js-Datei im VS Code-Editor. Suchen Sie den Seitentitel <h1>Welcome to <b>Gatsby!</b></h1> , und ändern Sie ihn in <h1>Hello <b>World!</b></h1>. Speichern Sie bei immer noch in http://localhost:8000 geöffnetem Webbrowser Ihre Änderung, und beachten Sie, wie das Hot Reloading-Feature Ihre Änderung automatisch kompiliert und Ihre Änderung im Browser aktualisiert.

   

Sie können den Debugger von VS Code mit Ihrer Gatsby-App verwenden, indem Sie die F5-TASTE auswählen oder in der Menüleiste "Debuggen anzeigen" (STRG+UMSCHALT+D) und "Debugkonsole anzeigen >> " (STRG+UMSCHALT+Y) aufrufen. Wenn Sie das Zahnradsymbol im Debugfenster auswählen, wird eine Startkonfigurationsdatei (launch.json) erstellt, damit Sie die Details zur Debug-Setup speichern können. Weitere Informationen finden Sie unter VS Code Debugging.

Weitere Informationen zu Gatsby finden Sie in den Gatsby.js Dokumentationen.