Začněte s Gatsby.js ve Windows

Průvodce, který vám pomůže s instalací webové architektury Gatsby.js a zprovozněním ve Windows.

Gatsby.js je framework generátoru statických webových stránek založený na React.js, na rozdíl od serverového vykreslování jako Next.js. Generátor statických webů generuje statický kód HTML v době sestavení. Nevyžaduje server. Next.js vygeneruje kód HTML za běhu (pokaždé, když přijde nový požadavek), který vyžaduje spuštění serveru. Gatsby také určuje, jak zpracovávat data v aplikaci (pomocí GraphQL), zatímco Next.js toto rozhodnutí ponechá na vás.

Další informace o Reactu a dalších javascriptových architekturách založených na Reactu najdete na stránce s přehledem Reactu .

Požadavky

V této příručce se předpokládá, že jste už dokončili kroky nastavení Node.js vývojového prostředí, včetně těchto:

• Instalace nejnovější verze Windows 10 (verze 1903+, build 18362+) nebo Windows 11
• nainstalovat subsystém Windows pro Linux (WSL), včetně distribuce Linuxu (například Ubuntu) a ujistěte se, že je spuštěný v režimu WSL 2. Můžete to zkontrolovat tak, že otevřete PowerShell a zadáte: wsl -l -v
• Nainstalujte Node.js do WSL 2: To zahrnuje správce verzí, správce balíčků, Visual Studio Code a rozšíření pro vzdálený vývoj.

Při práci s aplikacemi NodeJS doporučujeme používat subsystém Windows pro Linux, aby se zlepšila rychlost výkonu, kompatibilita volání systému a parody při spouštění linuxových serverů nebo kontejnerů Dockeru.

Důležité

Instalace linuxové distribuce pomocí WSL vytvoří adresář pro ukládání souborů: \\wsl\Ubuntu-20.04 (nahraďte Ubuntu-20.04 libovolnou distribucí Linuxu, kterou používáte). Pokud chcete tento adresář otevřít v Průzkumníku souborů Windows, otevřete příkazový řádek WSL, vyberte svůj domovský adresář pomocí cd ~a pak zadejte příkaz explorer.exe . Dávejte pozor, abyste nenainstalovali NodeJS nebo ukládal soubory, se kterými budete pracovat na připojené jednotce C (/mnt/c/Users/yourname$). Tím se výrazně zpomalí doba instalace a sestavení.

Nainstalujte Gatsby.js

Vytvoření projektu Gatsby.js:

1. Otevřete terminál WSL (tj. Ubuntu).

2. Vytvořte novou složku projektu: mkdir GatsbyProjects a zadejte tento adresář: cd GatsbyProjects

3. Pomocí npm nainstalujte rozhraní příkazového řádku Gatsby: npm install -g gatsby-cli. Po instalaci zkontrolujte verzi pomocí gatsby --version.

4. Vytvořte projekt Gatsby.js: gatsby new my-gatsby-app

5. Po instalaci balíčku přejděte do nové složky vaší aplikace cd my-gatsby-app a poté otevřete code . projekt Gatsby ve VS Code. To vám umožní podívat se na architekturu Gatsby.js, která byla vytvořena pro vaši aplikaci pomocí Průzkumníka souborů VS Code. Všimněte si, že VS Code otevřel vaši aplikaci v prostředí WSL-Remote (jak je uvedeno na zelené kartě v levém dolním rohu okna VS Code). To znamená, že když k úpravám operačního systému Windows používáte VS Code, stále běží vaše aplikace v operačním systému Linux.

   

6. Po instalaci Gatsby potřebujete vědět 3 příkazy:

   • gatsby develop pro spuštění vývojové instance s automatickým načítáním změn.
   • gatsby build pro vytvoření produkčního sestavení.
   • gatsby serve pro spuštění aplikace v produkčním režimu.

   Otevřete terminál WSL integrovaný ve VS Code (Zobrazení > Terminál). Ujistěte se, že cesta terminálu odkazuje na adresář projektu (tj. ~/GatsbyProjects/my-gatsby-app$). Pak zkuste spustit instanci vývoje nové aplikace pomocí následujících možností: gatsby develop

7. Po dokončení kompilace nového projektu Gatsby se v terminálu zobrazí. You can now view gatsby-starter-default in the browser. http://localhost:8000/ Výběrem tohoto odkazu localhost zobrazíte nový projekt integrovaný ve webovém prohlížeči.

Poznámka:

Všimněte si, že výstup terminálu vám také sdělí, že můžete otevřít GraphiQL, což je IDE v prohlížeči, abyste prozkoumali data a schéma vašeho webu: http://localhost:8000/___graphql. GraphQL konsoliduje vaše rozhraní API do samo-dokumentujícího integrovaného vývojového prostředí (GraphiQL) zabudovaného v Gatsby. Kromě zkoumání dat a schématu webu můžete provádět i operace GraphQL, jako jsou dotazy, mutací a předplatná. Další informace najdete v tématu Úvod k GraphiQL.

8. Otevřete soubor v editoru src/pages/index.js VS Code. Najděte název <h1>Welcome to <b>Gatsby!</b></h1> stránky a změňte ho na <h1>Hello <b>World!</b></h1>. Když máte webový prohlížeč stále otevřený na http://localhost:8000, uložte změnu a všimněte si, jak funkce živého aktualizování automaticky zkompiluje a aktualizuje vaši změnu v prohlížeči.

   

Ladicí program VS Code můžete použít s aplikací Gatsby tak, že vyberete klávesu F5 nebo přejdete na Zobrazit > ladění (Ctrl+Shift+D) a v řádku nabídek zobrazíte > konzolu ladění (Ctrl+Shift+Y). Pokud v okně Ladění vyberete ikonu ozubeného kola, vytvoří se soubor konfigurace spuštění (launch.json), který uloží podrobnosti o nastavení procesu ladění. Další informace o ladění ve VS Code najdete v tématu .

Další informace o Gatsby najdete v dokumentaci Gatsby.js.