Kezdje el a Gatsby.js használatát Windows rendszeren

Útmutató a Gatsby.js webes keretrendszer telepítéséhez és a Windowson való üzembe helyezéséhez.

Gatsby.js egy React.jsalapuló statikus webhely generátor keretrendszer, ellentétben az olyan kiszolgáló által renderelt megoldásokkal, mint a Next.js. A statikus webhelygenerátor statikus HTML-t hoz létre a létrehozási idő alatt. Nincs szükség kiszolgálóra. Next.js html-t hoz létre futtatókörnyezetben (minden alkalommal, amikor új kérés érkezik), és egy kiszolgáló futtatására van szükség. A Gatsby azt is meghatározza, hogyan kezelheti az adatokat az alkalmazásban (a GraphQL használatával), míg Next.js ezt a döntést Önre bízza.

A React és más, Reacten alapuló JavaScript-keretrendszerekről a React áttekintési oldalán talál további információt.

Előfeltételek

Ez az útmutató feltételezi, hogy már elvégezte a Node.js fejlesztési környezet beállításának lépéseit, beleértve a következőket:

• Telepítse a Windows 10 legújabb verzióját (1903-es verzió, 18362-es build+) vagy Windows 11-et
• Telepítse a Linuxhoz készült Windows-alrendszert (WSL), beleértve a Linux-disztribúciót (például az Ubuntu-t), és győződjön meg arról, hogy wSL 2 módban fut. Ezt a PowerShell megnyitásával és a következő beírással ellenőrizheti: wsl -l -v
• Telepítse a Node.js-et a WSL 2-re: Ez magában foglalja a verziókezelőt, a csomagkezelőt, a Visual Studio Code-ot és a távoli fejlesztési bővítményt.

Javasoljuk, hogy a NodeJS-alkalmazásokkal való munka során használja a Linux windowsos alrendszerét a jobb teljesítménysebesség, a rendszerhívások kompatibilitása és a paródiához Linux-kiszolgálók vagy Docker-tárolók futtatásakor.

Fontos

A Linux-disztribúció WSL-vel való telepítése létrehoz egy könyvtárat a fájlok tárolásához: \\wsl\Ubuntu-20.04 (cserélje le az Ubuntu-20.04-et a használt Linux-disztribúcióra). Ha meg szeretné nyitni ezt a könyvtárat a Windows Fájlkezelőben, nyissa meg a WSL parancssort, válassza ki a kezdőkönyvtárat a használatával cd ~, majd írja be a parancsot explorer.exe . Ügyeljen arra, hogy ne telepítse a NodeJS-t, és ne tárolja a csatlakoztatott C meghajtón (/mnt/c/Users/yourname$). Ez jelentősen lelassítja a telepítési és buildelési időt.

Gatsby.js telepítése

Gatsby.js projekt létrehozása:

1. Nyissa meg a WSL-terminált (azaz. Ubuntu).

2. Hozzon létre egy új projektmappát: mkdir GatsbyProjects, és adja meg a következő könyvtárat: cd GatsbyProjects

3. Az npm használatával telepítse a Gatsby parancssori felületet: npm install -g gatsby-cli. Telepítés után ellenőrizze a verziót a gatsby --version-val.

4. Hozza létre a Gatsby.js projektet: gatsby new my-gatsby-app

5. A csomag telepítése után módosítsa a könyvtárakat az új alkalmazásmappába, cd my-gatsby-appmajd nyissa code . meg a Gatsby-projektet a VS Code-ban. Ez lehetővé teszi, hogy megtekintse az alkalmazáshoz létrehozott Gatsby.js keretrendszert a VS Code Fájlkezelőjében. Figyelje meg, hogy a VS Code WSL-Remote környezetben nyitotta meg az alkalmazást (a VS Code ablakának bal alsó sarkában lévő zöld lapon látható módon). Ez azt jelenti, hogy amíg a VS Code-ot használja a Windows operációs rendszeren végzett szerkesztéshez, az továbbra is futtatja az alkalmazást a Linux operációs rendszeren.

   

6. A Gatsby telepítése után 3 parancsot kell tudnia:

   • gatsby develop a fejlesztési példány gyors újratöltéssel történő futtatásához.
   • gatsby build végleges build létrehozásához.
   • gatsby serve az alkalmazás éles módban való elindításához.

   Nyissa meg a VS Code-ba integrált WSL-terminált (Nézet > Terminál). Győződjön meg arról, hogy a terminál elérési útja a projektkönyvtárra mutat (például "~/GatsbyProjects/my-gatsby-app$"). Ezután próbálkozzon az új alkalmazás fejlesztési példányának futtatásával a következő használatával: gatsby develop

7. Miután az új Gatsby-projekt befejezte a fordítást, a terminál megjelenik.You can now view gatsby-starter-default in the browser. http://localhost:8000/. Válassza ezt a localhost hivatkozást az új projekt webböngészőben való megtekintéséhez.

Megjegyzés:

Észre fogja venni, hogy a terminál kimenete is tudomására hozza, hogy használhatja a GraphiQL-t, egy böngészőben futó IDE-t, amely lehetővé teszi webhelyének adatainak és sémájának felfedezését: http://localhost:8000/___graphql. A GraphQL a Gatsbybe épített, önmagát dokumentáló IDE-ben (GraphiQL) egyesíti az API-kat. A webhely adatainak és sémáinak feltárása mellett GraphQL-műveleteket is végrehajthat, például lekérdezéseket, mutációkat és előfizetéseket. További információ: A GraphiQL bemutatása.

8. Nyissa meg a fájlt a src/pages/index.js VS Code-szerkesztőben. Keresse meg a lap címét <h1>Welcome to <b>Gatsby!</b></h1>, és változtassa meg <h1>Hello <b>World!</b></h1>-re. Ha a böngésző továbbra is nyitva van http://localhost:8000, mentse a módosítást, és figyelje meg, hogy a gyakori elérésű újratöltés funkció automatikusan lefordítja és frissíti a módosítást a böngészőben.

   

A VS Code hibakeresőjét használhatja a Gatsby-alkalmazással az F5 billentyű kiválasztásával, vagy a hibakeresés megtekintése > (Ctrl+Shift+D) és a Hibakeresési konzol megtekintése > (Ctrl+Shift+Y) lehetőséggel a menüsávon. Ha a hibakeresési ablakban a fogaskerék ikont választja, a hibakeresési beállítások részleteinek mentéséhez létrejön egy indítási konfigurációs (launch.json) fájl. További információkért lásd: VS Code hibakeresés.

A Gatsbyről további információkért lásd a Gatsby.js dokumentációt.