Aan de slag met Gatsby.js in Windows

Een handleiding om u te helpen het Gatsby.js webframework te installeren en aan de slag te gaan met Windows.

Gatsby.js is een statisch site-generatorframework gebaseerd op React.js, in tegenstelling tot te worden gerenderd via de server zoals Next.js. Een statische sitegenerator genereert statische HTML tijdens de buildtijd. Er is geen server vereist. Next.js HTML genereert tijdens runtime (telkens wanneer er een nieuwe aanvraag binnenkomt), waarvoor een server moet worden uitgevoerd. Gatsby bepaalt ook hoe u gegevens in uw app verwerkt (met GraphQL), terwijl Next.js die beslissing aan u overlaat.

Zie de overzichtspagina van React voor meer informatie over React en andere JavaScript-frameworks op basis van React.

Vereiste voorwaarden

In deze handleiding wordt ervan uitgegaan dat u de stappen voor het instellen van uw Node.js ontwikkelomgeving al hebt voltooid, waaronder:

• Installeer de nieuwste versie van Windows 10 (versie 1903+, build 18362+) of Windows 11
• Installeer het Windows-subsysteem voor Linux (WSL), inclusief een Linux-distributie (zoals Ubuntu) en zorg ervoor dat het wordt uitgevoerd in de WSL 2-modus. U kunt dit controleren door PowerShell te openen en het volgende in te voeren: wsl -l -v
• Installeer Node.js op WSL 2: dit omvat een versiebeheer, pakketbeheer, Visual Studio Code en de extensie Voor externe ontwikkeling.

U wordt aangeraden het Windows-subsysteem voor Linux te gebruiken bij het werken met NodeJS-apps voor betere prestaties, compatibiliteit van systeemoproepen en voor parody bij het uitvoeren van Linux-servers of Docker-containers.

Belangrijk

Als u een Linux-distributie met WSL installeert, wordt er een map gemaakt voor het opslaan van bestanden: \\wsl\Ubuntu-20.04 (vervang Ubuntu-20.04 door elke Linux-distributie die u gebruikt). Als u deze map wilt openen in Windows Verkenner, opent u de WSL-opdrachtregel, selecteert u de basismap met behulp van cd ~en voert u de opdracht in explorer.exe . Zorg ervoor dat u NodeJS niet installeert of bestanden opslaat waarmee u werkt op het gekoppelde C-station (/mnt/c/Users/yourname$). Als u dit doet, worden de installatie- en buildtijden aanzienlijk vertraagd.

Gatsby.js installeren

Een Gatsby.js-project maken:

1. Open uw WSL-terminal (bijvoorbeeld. Ubuntu).

2. Maak een nieuwe projectmap: mkdir GatsbyProjects en ga naar die map: cd GatsbyProjects

3. Gebruik npm om de Gatsby CLI te installeren: npm install -g gatsby-cli. Nadat de installatie voltooid is, controleer de versie met gatsby --version.

4. Maak uw Gatsby.js-project: gatsby new my-gatsby-app

5. Zodra het pakket is geïnstalleerd, verandert u van map naar uw nieuwe app-map cd my-gatsby-app en opent u uw Gatsby-project in VS Code met code .. Hiermee kunt u het Gatsby.js framework bekijken dat is gemaakt voor uw app met behulp van de Verkenner van VS Code. U ziet dat VS Code uw app heeft geopend in een WSL-Remote-omgeving (zoals aangegeven op het groene tabblad linksonder in het VS Code-venster). Dit betekent dat terwijl u VS Code gebruikt voor bewerking op het Windows-besturingssysteem, uw app nog steeds wordt uitgevoerd op het Linux-besturingssysteem.

   

6. Er zijn drie opdrachten die u moet weten wanneer Gatsby is geïnstalleerd:

   • gatsby develop voor het uitvoeren van een ontwikkelingsinstance met hot-reloading.
   • gatsby build voor het maken van een productieversie.
   • gatsby serve voor het starten van uw app in de productiemodus.

   Open de geïntegreerde WSL terminal in VS Code (View > Terminal). Zorg ervoor dat het terminalpad naar uw projectmap wordt verwezen (bijvoorbeeld ~/GatsbyProjects/my-gatsby-app$). Voer vervolgens een ontwikkelexemplaren van uw nieuwe app uit met behulp van: gatsby develop

7. Zodra het nieuwe Gatsby-project klaar is met compileren, wordt uw terminal weergegeven.You can now view gatsby-starter-default in the browser. http://localhost:8000/ Selecteer deze localhost-koppeling om uw nieuwe project weer te geven dat is gebouwd in een webbrowser.

Opmerking

U ziet dat de uitvoer van uw terminal ook laat zien dat u 'GraphiQL, een IDE in de browser, kunt weergeven om de gegevens en het schema van uw site te verkennen: http://localhost:8000/___graphql' GraphQL consolideert uw API's in een zelfdocumenterende IDE (GraphiQL) die is ingebouwd in Gatsby. Naast het verkennen van de gegevens en het schema van uw site, kunt u GraphQL-bewerkingen uitvoeren, zoals query's, mutaties en abonnementen. Zie Inleiding tot GraphiQL voor meer informatie.

8. Open het src/pages/index.js-bestand in de VS Code-editor. Zoek de paginatitel <h1>Welcome to <b>Gatsby!</b></h1> en wijzig deze in <h1>Hello <b>World!</b></h1>. Als uw webbrowser nog steeds is geopend op http://localhost:8000, sla uw wijziging op en merk dat de hot-reloading functie uw wijziging automatisch compileert en bijwerkt in de browser.

   

U kunt het foutopsporingsprogramma van VS Code gebruiken met uw Gatsby-app door de F5-toets te selecteren of door in de menubalk naar > Foutopsporing (Ctrl+Shift+D) en > de foutopsporingsconsole (Ctrl+Shift+Y) te gaan. Als u het tandwielpictogram selecteert in het venster Foutopsporing, wordt er een opstartconfiguratiebestand (launch.json) gemaakt om foutopsporingsinstellingen op te slaan. Zie VS Code-foutopsporingvoor meer informatie.

Zie de Gatsby.js documenten voor meer informatie over Gatsby.