Gatsby è un Reagire framework che consente di creare applicazioni statiche e serverless. I siti Gatsby sono diversi dai siti tradizionali perché sono spesso distribuiti su una rete di distribuzione del contenuto (CDN) e sono indipendenti dal contenuto.
Il vantaggio di schierare da a CDN è che c’è meno latenza e che i siti vengono generalmente serviti al client più velocemente.
Gatsby è spesso descritto come una mesh di contenuti. Una mesh di contenuti significa che, come utente, puoi estrarre dati da una varietà di fonti, come un sito WordPress, un file CSV e una varietà di API esterne; di conseguenza, Gatsby è indipendente dai dati.
Questo è diverso da un tradizionale sistema di gestione dei contenuti (CMS) come WordPress e Drupal, dove i dati di solito provengono da un’unica fonte: un database. Quando crei un’app in Gatsby, non devi preoccuparti della manutenzione e del provisioning di un database. Inoltre, utilizzando Gatsby, puoi creare una struttura nota per la sua velocità e flessibilità.
Questi siti serverless sono anche conosciuti come JAMstack. In un’architettura JAMStack, è ancora coinvolto un server, ma lo sviluppatore non ha bisogno di fornire o mantenere il server. Alcuni sviluppatori considerano i server Serverless una funzionalità desiderabile perché possono concentrare maggiormente l’attenzione sulla logica aziendale della loro applicazione.
Ad esempio, se stessero creando un negozio di e-commerce, potrebbero concentrarsi sul codice direttamente correlato alla creazione e alla vendita di prodotti. JAMStack aiuta gli sviluppatori a sviluppare rapidamente siti Web più sicuri, più efficienti e meno costosi da implementare rispetto ai framework CMS tradizionali.
Alla fine di questo tutorial, sarai in grado di creare e modificare un sito Gatsby. Avrai il tuo primo sito di e-commerce Gatsby attivo e funzionante, ma creeremo questo sito solo sul tuo computer locale e non lo implementeremo.
Leggi: Le migliori piattaforme CMS per sviluppatori Web
Di seguito puoi trovare i prerequisiti per lavorare con Gatsby in React:
- Nodo.js versione > 10.
- Una comprensione di JavaScript sarà utile. Sebbene Gatsby utilizzi React, non è necessario conoscere React per iniziare, ma sarebbe utile avere familiarità con le basi.
Come installare Gatsby e la configurazione del progetto
In questo passaggio, installerai un nuovo sito Gatsby da un modello. Gatsby fornisce agli utenti modelli di partenza, quindi non devi preoccuparti di creare un sito Web da zero.
Scarica il Gatsby CLI pacchetto. Questa interfaccia a riga di comando di Gatsby ti consentirà di creare e personalizzare un nuovo sito Web:
npm install -g gatsby-cli
La bandiera -G significa che stai installando l’interfaccia della riga di comando di Gatsby a livello globale e ciò ti consentirà di utilizzare lo strumento in qualsiasi directory.
Se digiti il seguente comando, verranno visualizzati diversi comandi che possono essere utilizzati quando si lavora con Gatsby:
gatsby help
Questo produrrà il seguente output:
Opzioni del comando di aiuto di Gatsby
Ora con gli strumenti da riga di comando di Gatsby installati, hai ancora bisogno di un sito web. Uno dei vantaggi di Gatsby è che non devi codificare un sito da zero.
Gatsby ha diversi modelli di partenza che puoi utilizzare per far funzionare il tuo sito. Ci sono centinaia di modelli là fuori e molti di questi contributi provengono dalla comunità.
Per questo sviluppo web e tutorial di Gatsby, utilizzeremo uno dei primi modelli dell’ufficiale Gatsby, il Gatsby Starter predefinito. La prima cosa da fare è installare uno starter Gatsby tramite il terminale:
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
Questo comando crea un nuovo sito web utilizzando il modello gatsby-starter-default e nomina il progetto dopo il modello.
Fai attenzione ai log finché non vedi il progetto creato con successo.
Ora che abbiamo creato un nuovo progetto Gatsby ed esplorato la struttura dei file, entriamo nel progetto e personalizziamo i metadati del sito web.
Leggi: Angular vs React: confronto delle caratteristiche
Come modificare le configurazioni di Gatsby
Se vuoi che il tuo sito venga scoperto da un motore di ricerca, è importante formattare correttamente i tuoi metadati. In questa sezione configurerai il titolo, la descrizione e i metadati dell’autore nella tua app.
Aprire gatsby-config.js in un editor di testo per vedere la configurazione di Gatsby. Il seguente è gatsby-config.js con le impostazioni fornite con il Antipasto predefinito Gatsby modello:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
// This will impact how browsers show your PWA/website
// https://css-tricks.com/meta-theme-color-and-trickery/
// theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
Il file di configurazione di Gatsby contiene anche i suoi plugin. Plugin sono pacchetti che installi per aggiungere funzionalità alla tua app Gatsby.
Questa installazione di Gatsby viene fornita con gatsby-plugin-react-casco, gatsby-plugin-image, gatsby-transformer-sharp, gatsby-plugin-sharp, e manifesto-plugin gatsby plugin.
Ciascun modello Gatsby Default Starter contiene gli stessi metadati generici. Personalizziamo questi dati sostituendo il testo con titolo, descrizione e autore aggiornando il seguente oggetto codice:
siteMetadata: {
title: `HtmlGoodies - Getting Started with Gatsby`,
description: `A quick overview of Gatsby features and setup.`,
author: `@htmlgoodies`,
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
},
Salva ed esci dal file.
Ora, quando Google o un altro motore di ricerca esegue la scansione del tuo sito web, recupera i dati associati alla tua app. Andiamo avanti e aggiorniamo una delle pagine del sito.
Modificare una pagina indice di Gatsby
È tempo di vedere come appare il sito Web di Gatsby nel tuo browser. Apri una nuova finestra di terminale e digita il seguente comando per visualizzare la versione locale del sito:
gatsby develop
Questo comando avvia il download di tutte le dipendenze del nodo richieste, imposta il bundle di sviluppo e avvia il server di sviluppo a cui è possibile accedere all’indirizzo http://localhost:8000/.
Pagina iniziale iniziale di Gatsby predefinita
Modifichiamo il markup sulla pagina per renderlo più simile al contenuto che troveresti su un sito di e-commerce. Modifica il suo contenuto come segue:
import * as React from "react" import { Link } from "gatsby" import Layout from "../components/layout" import Seo from "../components/seo" import Product from "./product" const products = [ { id: 1, title: "Hand sanitizer", price: 12.39, photo: "hand_sanitizer.png", }, { id: 2, title: "Thermometer", price: 23.99, photo: "thermometer.png", }, { id: 3, title: "Disinfectant spray", price: 5.0, photo: "disinfectant_spray.png", }, { id: 4, title: "Alcohol spray", price: 9.99, photo: "alcohol_spray.png", }, ] const IndexPage = () => ( <Layout> <Seo title="Home" /> <h1>Welcome to your web pharmacy</h1> <p>Choose among the best online products for your personal hygiene.</p> <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", }} > {products.map((prod, i) => ( <Product key={i} product={prod} /> ))} </div> </Layout> ) export default IndexPage
Nota che stiamo usando un po’ più di potenza React qui. Abbiamo creato un array di prodotti per emulare i dati provenienti dal tuo server. Quindi, iteriamo sui suoi valori per creare per ognuno un nuovo Prodotto componente.
Il Prodotto componente ha bisogno del suo file. Quindi, vai avanti e crea un nuovo file chiamato prodotto.js e aggiungi questo contenuto:
import { Link } from "gatsby" import * as React from "react" const Product = ({ product }) => ( <div style={{ padding: "2rem", margin: "2px", border: "1px solid grey", textAlign: "center", }} > <img src={product.photo} width={150} quality={95} alt={product.title} style={{ marginBottom: `1.5rem` }} /> <h3>{product.title}</h3> <span style={{ marginBottom: "1rem", display: "block" }}> Price: ${product.price} </span> <Link to="https://www.htmlgoodies.com/javascript/gatsby-react-framework/#">Add to cart</Link> <br /> </div> ) export default Product
Nota come utilizziamo ogni elemento dell’array dei prodotti per creare un nuovo articolo nell’elenco e-commerce, come mostrato di seguito:
Nuovi articoli di e-commerce estratti dalla gamma di prodotti hardcoded
Le immagini devono essere inserite nel /statico cartella nella radice del tuo progetto Gatsby. Puoi aggiungere le tue versioni per vedere come funziona.
Conclusione su Gatsby per principianti
In questo tutorial, hai creato il tuo primo sito web Gatsby. Hai imparato come configurare un sito Gatsby di base sul tuo computer locale. Ora che puoi creare e personalizzare un’app Gatsby, vai avanti e giocaci, aggiungi più componenti e consulta i documenti per vedere cos’altro Gatsby può offrirti.