Inizia con Gatsby.js su Windows

Guida che consente di installare il framework Web Gatsby.js e di iniziare a funzionare in Windows.

Gatsby.js è un framework per generatori di siti statici basato su React.js, anziché essere renderizzato dal server come Next.js. Un generatore di siti statici genera codice HTML statico in fase di compilazione. Non richiede un server. Next.js genera codice HTML in fase di esecuzione (ogni volta che viene visualizzata una nuova richiesta), richiedendo l'esecuzione di un server. Gatsby determina anche come gestire i dati nell'app (con GraphQL), mentre Next.js lascia tale decisione all'utente.

Per saperne di più su React e altri framework JavaScript basati su React, vedere la pagina panoramica su React.

Prerequisiti

Questa guida presuppone che siano già stati completati i passaggi per configurare l'ambiente di sviluppo Node.js, tra cui:

• Installare la versione più recente di Windows 10 (versione 1903+, Build 18362+) o Windows 11
• Installare il sottosistema Windows per Linux (WSL), inclusa una distribuzione Linux (ad esempio Ubuntu) e assicurarsi che sia in esecuzione in modalità WSL 2. Puoi verificarlo aprendo PowerShell e immettendo: wsl -l -v
• Installare Node.js in WSL 2: include un gestore di versioni, un gestore di pacchetti, Visual Studio Code e l'estensione Sviluppo remoto.

È consigliabile usare il sottosistema Windows per Linux quando si usano app NodeJS per migliorare la velocità delle prestazioni, la compatibilità delle chiamate di sistema e per la parodia quando si eseguono server Linux o contenitori Docker.

Importante

L'installazione di una distribuzione Linux con WSL creerà una directory per l'archiviazione dei file: \\wsl\Ubuntu-20.04 (sostituire Ubuntu-20.04 con qualsiasi distribuzione Linux in uso). Per aprire questa directory in Esplora file di Windows, apri la riga di comando di WSL, seleziona la tua home directory usando cd ~, quindi digita il comando explorer.exe .. Fare attenzione a non installare NodeJS o a memorizzare i file con cui lavorerai nell'unità C montata (/mnt/c/Users/yourname$). Questa operazione rallenta notevolmente i tempi di installazione e compilazione.

Installare Gatsby.js

Per creare un progetto Gatsby.js:

1. Aprire il terminale WSL (ad es. Ubuntu).

2. Creare una nuova cartella del progetto: mkdir GatsbyProjects e accedere a tale directory: cd GatsbyProjects

3. Usare npm per installare la CLI di Gatsby: npm install -g gatsby-cli. Dopo l'installazione, verifica la versione con gatsby --version.

4. Crea il tuo progetto Gatsby.js: gatsby new my-gatsby-app

5. Dopo aver installato il pacchetto, modificare le directory nella nuova cartella dell'app, cd my-gatsby-app, quindi usare code . per aprire il progetto Gatsby in VS Code. Ciò consentirà di esaminare il framework Gatsby.js creato per l'app usando Esplora file di VS Code. Noterai che VS Code ha aperto l'app in un ambiente WSL-Remote, come indicato nella scheda verde in basso a sinistra nella finestra di VS Code. Ciò significa che mentre si usa VS Code per la modifica nel sistema operativo Windows, l'app è ancora in esecuzione nel sistema operativo Linux.

   

6. Dopo l'installazione di Gatsby sono necessari 3 comandi:

   • gatsby develop per l'esecuzione di un'istanza di sviluppo con ricaricamento rapido.
   • gatsby build per la realizzazione di un build di produzione.
   • gatsby serve per avviare l'app in modalità di produzione.

   Apri il terminale WSL integrato in VS Code ( VisualizzaTerminale >). Assicurati che il percorso del terminale punti alla directory del tuo progetto (ad es. ~/GatsbyProjects/my-gatsby-app$). Provare quindi a eseguire un'istanza di sviluppo della nuova app usando: gatsby develop

7. Una volta terminata la compilazione del nuovo progetto Gatsby, il terminale mostrerà qualcosa.You can now view gatsby-starter-default in the browser. http://localhost:8000/ Selezionare questo collegamento localhost per visualizzare il nuovo progetto compilato in un Web browser.

Annotazioni

Noterai che l'output del terminale ti informa che puoi "visualizzare GraphiQL, un IDE nel browser, per esplorare i dati e lo schema del tuo sito: http://localhost:8000/___graphql". GraphQL consolida le tue API in un IDE autodocumentante (GraphiQL) incorporato in Gatsby. Oltre a esplorare i dati e lo schema del sito, è possibile eseguire operazioni GraphQL, ad esempio query, mutazioni e sottoscrizioni. Per più informazioni, vedere Introduzione a GraphiQL.

8. Aprire il file nell'editor src/pages/index.js di VS Code. Trovare il titolo <h1>Welcome to <b>Gatsby!</b></h1> della pagina e modificarlo in <h1>Hello <b>World!</b></h1>. Con il Web browser ancora aperto a http://localhost:8000, salvare la modifica e notare che la funzionalità di ricaricamento rapido compila e aggiorna automaticamente la modifica nel browser.

   

È possibile usare il debugger di VS Code con l'app Gatsby selezionando il tasto F5 oppure passando a Visualizza > debug (CTRL+MAIUSC+D) e Visualizza > console di debug (CTRL+MAIUSC+Y) nella barra dei menu. Se si seleziona l'icona a forma di ingranaggio nella finestra Debug, verrà creato un file di configurazione di avvio (launch.json) per salvare i dettagli dell'installazione del debug. Per altre informazioni, vedere debug di VS Code.

Per altre informazioni su Gatsby, vedere la documentazioneGatsby.js.