Come installare Gatsby.js Node Framework su Ubuntu 22.04

Su questa pagina

1. Prerequisiti
2. Imposta nuovo utente
3. Installazione di nvm (Node Version Manager) e Node.js
4. Installazione di Gatsby-CLI
5. Crea il primo sito con Gatsbyjs
6. Conclusione

GatsbyJS o Gatsby è un framework gratuito e open source per la creazione di app e siti Web incredibilmente veloci e moderni con React. Gatsby è ottimizzato per la moderna tecnologia dei siti Web come i core web vitals e il punteggio Lighthouse. È basato su ReactJS, Webpack, javascript e CSS. Inoltre, fornisce un caricamento alla velocità della luce per tutti i tuoi contenuti ed è supportato con ampie librerie e plug-in.

GatsbyJS rende il tuo processo di sviluppo ancora più veloce, fornisce uno starter pack e modelli per i tuoi siti web o applicazioni. GatsbyJS è un framework per la creazione di CMS headless con supporto di più backend CMS come WordPress, Contentful, Drupal, Shopify, Strapi, Ghost e NetlifyCMS. GatsbyJS combina il controllo e la scalabilità dei siti con rendering dinamico con la velocità della generazione di siti statici per la creazione di siti Web o applicazioni.

In questo tutorial imparerai come installare e configurare Gatsby.js sulla macchina Ubuntu 22.04.

Prerequisiti

• Una macchina Ubuntu 22.04: puoi utilizzare la versione desktop o la versione server.
• Un utente root o amministratore.

Imposta nuovo utente

Inizialmente, creerai un nuovo utente Linux sul tuo sistema che verrà utilizzato per eseguire il progetto/applicazione Gatbs.js. In questa demo, creerai un nuovo utente chiamato alice.

Esegui il seguente comando per creare un nuovo utente alice.

useradd -m -s /bin/bash alice

Ora imposta la password per l'utente alice utilizzando il comando seguente.

passwd alice

Aggiungi l'utente alice al gruppo sudo e consenti all'utente alice di eseguire il comando sudo su e ottenere il root /privilegi di amministratore.

sudo usermod -aG sudo alice

Ora accedi come utente alice usando il comando seguente, esegui anche il comando sudo su per controllare e verificare i privilegi di amministratore root.

su - alice
sudo su

Inserisci la password per l'utente alice e premi INVIO. Se ricevi il nuovo prompt come \[email protetta]\, hai ottenuto correttamente i privilegi di root.

Inserisci il comando exit o premi Ctrl+d per uscire dai privilegi di root e visualizzerai il normale prompt come utente alice.

Installazione di nvm (Node Version Manager) e Node.js

Gatsby.js è un framework JavaScript scritto in Node.js e ora installerai Node.js sul tuo sistema Ubuntu.

Esistono diversi modi per installare Node.js sul sistema Ubuntu, questo include l'utilizzo di Node.js fornito dal repository Ubuntu APT ufficiale, l'utilizzo di repository di terze parti come nodesource e l'utilizzo di NVM (Node Version Manager).

In questo esempio, installerai Node.js utilizzando NVM (Node Version Manager). E questo verrai installato sotto l'utente alice che hai appena creato nella prima fase.

Aggiorna e aggiorna il tuo repository Ubuntu, quindi installa il pacchetto curl sul tuo sistema usando i comandi seguenti.

sudo apt update
sudo apt install curl

Ora scarica lo script di installazione di NVM usando il comando curl ed eseguilo.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Una volta completato tutto il processo, vedrai il messaggio di output come lo screenshot qui sotto. Come puoi vedere, il programma di installazione scarica il codice sorgente di NVM nella tua home directory e aggiunge alcune configurazioni al file ~/.bashrc.

Ora esegui il comando seguente per generare il file ~/.bashrc e ricaricare la tua attuale sessione di bash shell. Inoltre, questo applicherà le nuove modifiche al file di configurazione ~/.bashrc e ti consentirà di eseguire immediatamente la NVM senza uscire dalla sessione corrente.

source ~/.bashrc

Ora esegui il comando nvm di seguito per controllare e verificare l'installazione di nvm (Node Version Manager).

nvm --version
nvm --help

Se ricevi l'output della versione di NVM e i messaggi di aiuto per il comando nvm, l'installazione è andata a buon fine e ora sei pronto per installare Node.js.

Esegui il comando nvm di seguito per installare Node.js v16 sul tuo sistema. Questa installazione interesserà solo l'ambiente dell'utente alice.

nvm install 16

Ora puoi vedere che NVM sta scaricando il file binario di Node.js v16 e configura automaticamente l'installazione per l'utente alice.

Quando tutto il processo è completato, esegui il comando seguente per impostare la versione predefinita di Node.js su v16.

nvm use 16

Infine, puoi verificare e controllare la versione Node.js e la versione NPM utilizzando il seguente comando.

node --version
npm --version

Come puoi vedere nello screenshot seguente, Node.js v16 è ora installato sulla macchina Ubuntu sotto l'utente alice. E hai installato Node.js utilizzando NVM (Node Version Manager).

Installazione di Gatsby-CLI

Gatsby-CLI è un avviatore di comandi per le applicazioni Gatsby. Può essere utilizzato per avviare e creare un nuovo progetto Gatsby, eseguire il server di sviluppo per Gatsby e creare l'applicazione Gatsby per la distribuzione.

Gatsby-CLI può essere installato dal repository npm Node.js.

Esegui il comando npm di seguito per installare gatsby-cli nel tuo ambiente locale.

npm -g install gatsby-cli

Al termine dell'installazione, eseguire il comando gatsby di seguito per controllare la versione e verificare l'installazione di Gatsby-CLI.

gatsby --version

Di seguito puoi vedere che hai installato Gatsby CLI v4.15.

Inoltre, esegui anche il comando seguente per disabilitare la telemetria e la creazione di report per l'utilizzo di dati anonimi nel tuo progetto Gatsby.

gatsby telemetry --disable

Crea il primo sito con Gatsbyjs

A questo punto, hai completato l'installazione di Gatsby-CLI, e ora sei pronto per creare la prima applicazione/progetto utilizzando Gatsby.

Esegui il comando gatsby di seguito per creare un nuovo primo progetto di Gatsby.

gatsby new

Ora ti verranno chieste alcune configurazioni del tuo progetto Gatsby:

• Inserisci il titolo per il tuo nuovo sito/progetto Gatsby. questo esempio è il \sito Test Gatsby\
• Inserisci il nome della directory per il tuo nuovo progetto gatsby. In questo esempio, la directory sarà nel \test-site\.
• Scegli il linguaggio di programmazione per il tuo nuovo progetto Gatsby. Puoi scegliere se JavaScript o TypeScript. Questo esempio sarà JavaScript.
• Per il backend CMS, puoi selezionare l'opzione \No (o lo aggiungerò più tardi)\. Gatsby supporta diversi tipi di backend CMS come WordPress, Ghost, ecc.
• Per il sistema di stile dell'interfaccia, puoi selezionare il framework come preferisci. In questo esempio, utilizzerai \Theme UI\.

E ora inizierà l'installazione delle dipendenze per il tuo nuovo progetto Gatsby.

Quando tutto il processo è completato, puoi vedere l'output come il seguente screenshot. Inoltre, otterrai una nuova directory chiamata \test-site\ che contiene tutto il codice sorgente e la configurazione per il tuo progetto Gatsby.

Ora cambia la directory di lavoro in \test-site\ ed esegui il server di sviluppo gatsby usando i comandi seguenti.

cd test-site/
gatsby develop -H 192.168.10.15

L'opzione -H 192.168.10.15 specificherà l'indirizzo di bind per il tuo server di sviluppo locale Gatsby. Inoltre stai utilizzando la porta predefinita 8000 per il tuo progetto Gatsby.

Nello screenshot qui sotto puoi vedere il processo completo del tuo progetto Gatsby. E alla fine, puoi vedere il messaggio che puoi accedere al tuo progetto Gatsby all'indirizzo http://192.168.10.15:8000.

Apri il tuo browser web e visita l'indirizzo del tuo progetto Gatsby (ad es. http://192.168.10.15:8000/).

E ora puoi vedere la home page predefinita del tuo progetto Gatsby.

Conclusione

Congratulazioni! Ora hai installato con successo Gatsby sull'ultima macchina Ubuntu 22.04. Hai anche imparato come configurare e installare Node.js utilizzando NVM (Node Version Manager). Alla fine, hai anche imparato come creare un nuovo progetto/sito utilizzando Gatsby ed eseguire il server di sviluppo del progetto Gatsby.