Kom igång med Gatsby.js i Windows

En guide som hjälper dig att installera Gatsby.js webbramverk och komma igång i Windows.

Gatsby.js är ett statiskt webbplatsgeneratorramverk baserat på React.js, i stället för att vara server-renderat som Next.js. En statisk platsgenerator genererar statisk HTML vid byggtid. Det kräver ingen server. Next.js genererar HTML vid körning (varje gång en ny begäran kommer in), vilket kräver att en server körs. Gatsby avgör också hur du hanterar data i din app (med GraphQL), medan Next.js lämnar det beslutet till dig.

Mer information om React och andra JavaScript-ramverk baserade på React finns på översiktssidan för React .

Förutsättningar

Den här guiden förutsätter att du redan har slutfört stegen för att konfigurera din Node.js utvecklingsmiljö, inklusive:

• Installera den senaste versionen av Windows 10 (version 1903+, Build 18362+) eller Windows 11
• Installera Windows-undersystemet för Linux (WSL) inklusive en Linux-distribution (t.ex. Ubuntu) och kontrollera att det körs i WSL 2-läge. Du kan kontrollera detta genom att öppna PowerShell och ange: wsl -l -v
• Installera Node.js på WSL 2: Detta inkluderar en versionshanterare, pakethanterare, Visual Studio Code och tillägget Fjärrutveckling.

Vi rekommenderar att du använder Windows-undersystemet för Linux när du arbetar med NodeJS-appar för bättre prestandahastighet, systemanropskompatibilitet och för parodi när du kör Linux-servrar eller Docker-containrar.

Viktigt!

Om du installerar en Linux-distribution med WSL skapas en katalog för lagring av filer: \\wsl\Ubuntu-20.04 (ersätt Ubuntu-20.04 med den Linux-distribution du använder). Om du vill öppna den här katalogen i Utforskaren i Windows öppnar du WSL-kommandoraden, väljer din hemkatalog med och cd ~anger sedan kommandot explorer.exe . Var noga med att inte installera NodeJS eller lagra filer som du kommer att arbeta med på den monterade C-enheten (/mnt/c/Users/yourname$). Om du gör det blir installationen och byggtiden avsevärt långsammare.

Installera Gatsby.js

Så här skapar du ett Gatsby.js projekt:

1. Öppna WSL-terminalen (dvs. Ubuntu).

2. Skapa en ny projektmapp: mkdir GatsbyProjects och ange den katalogen: cd GatsbyProjects

3. Använd npm för att installera Gatsby CLI: npm install -g gatsby-cli. När du har installerat kontrollerar du versionen med gatsby --version.

4. Skapa ditt Gatsby.js projekt: gatsby new my-gatsby-app

5. När paketet har installerats ändrar du kataloger till den nya appmappen och cd my-gatsby-appanvänder code . sedan för att öppna Gatsby-projektet i VS Code. Detta gör att du kan titta på ramverket Gatsby.js som har skapats för din app med VS Code-utforskaren. Observera att VS Code öppnade din app i en WSL-Remote miljö (som anges på den gröna fliken längst ned till vänster i VS Code-fönstret). Det innebär att medan du använder VS Code för redigering i Windows-operativsystemet, körs appen fortfarande på Linux-operativsystemet.

   

6. Det finns tre kommandon som du behöver veta när Gatsby har installerats:

   • gatsby develop för att köra en utvecklingsinstans med hot-reload.
   • gatsby build för att skapa en produktionsversion.
   • gatsby serve för att starta appen i produktionsläge.

   Öppna WSL-terminalen som är integrerad i VS Code (Visa > terminal). Kontrollera att terminalsökvägen är riktad mot projektkatalogen (dvs. ~/GatsbyProjects/my-gatsby-app$). Prova sedan att köra en utvecklingsinstans av din nya app med hjälp av: gatsby develop

7. När ditt nya Gatsby-projekt har kompilerats visas terminalen.You can now view gatsby-starter-default in the browser. http://localhost:8000/. Välj den här localhost-länken för att visa ditt nya projekt som skapats i en webbläsare.

Anmärkning

Du kommer att märka att terminalutdata också låter dig veta att du kan "Visa GraphiQL, en IDE i webbläsaren, för att utforska webbplatsens data och schema: http://localhost:8000/___graphql" GraphQL konsoliderar dina API:er till en självdokumenterande IDE (GraphiQL) inbyggd i Gatsby. Förutom att utforska webbplatsens data och schema kan du utföra GraphQL-åtgärder som frågor, mutationer och prenumerationer. Mer information finns i Introduktion till GraphiQL.

8. src/pages/index.js Öppna filen i VS Code-redigeraren. Leta upp sidrubriken <h1>Welcome to <b>Gatsby!</b></h1> och ändra den till <h1>Hello <b>World!</b></h1>. Om din webbläsare fortfarande är öppen till http://localhost:8000, sparar du ändringen och noterar du att funktionen för snabb omladdning automatiskt kompilerar och uppdaterar din ändring i webbläsaren.

   

Du kan använda VS Code-felsökaren med Gatsby-appen genom att välja F5-nyckeln eller genom att gå till Visa > felsökning (Ctrl+Skift+D) och Visa > felsökningskonsol (Ctrl+Skift+Y) i menyraden. Om du väljer kugghjulsikonen i felsökningsfönstret skapas en startkonfigurationsfil (launch.json) där du kan spara information om felsökningskonfigurationen. För att lära dig mer, se Felsökning i VS Code.

Mer information om Gatsby finns i Gatsby.js dokument.