Sommario
Gatsby Step 2 - Analisi
Struttura, Componenti, Plugins e Starters: di quali ingredienti abbiamo bisogno?
Nello step 1 abbiamo installato ed avviato lo starter greater-gatsby
:
gatsby new esempio https://github.com/rbutera/greater-gatsby
cd esempio
gatsby develop
In questa parte della guida analizzeremo i seguenti aspetti di un progetto Gatsby:
- Struttura del progetto : pochi file, bene organizzati
- Componenti react: i mattoni del web
- Pagine e Routing: pagine manuali, automatiche e links
- Plugin: CMS, e-commerce, SEO, etc
- Starters: templates per andare subito in produzione
Struttura del progetto
Questi sono i file principali:
|-- /src
|-- /pages
|-- gatsby-browser.js
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
in particolare:
gatsby-config.js
— configura il sito: title, description, plugins, etcgatsby-node.js
— estende il processo di build attraverso le API NodeJsgatsby-browser.js
— estende le funzionalità attraverso le API browsergatsby-ssr.js
— estende le funzionalità attraverso le API di rendering server-side
Componenti React
ReactJs estende HTML creando nuovi Componenti riusabili. Una pagina in Gatsby è un'insieme di Componenti React.
Questo è l'aspetto della pagina index.tsx
dello start usato:
Per creare nuove pagine basta creare nuovi file nella cartella /src/pages/
.
Pagine e Routing
Il routing riguarda la gestione delle URL, le rotte per le pagine del sito.
Le rotte possono essere create in tre modi:
- Creando Componenti React in
src/pages
. - Usando File System Route API per mostrare i contenuti del database GrapQL.
- Usando
createPages
ingatsby-node.js
per un maggiore controllo.
Come abbiamo visto nel paragrafo precedente, la cosa più semplice è creare nuovi file e costruire la pagina tramite componenti React.
File System Route API
Avendoci invece delle risorse GrapQL, il File System Route API è il modo più semplice di trasformarle in pagine web.
Data una risorsa GrapQL (ad esempio Products
) usando le parentesi graffe nel nome del file ({ }
), si possono generare tutte le pagine di quella data risorsa:
src/pages/prodotti/{Product.name}.js
=> /prodotti/strega
src/pages/prodotti/{Product.name}/recipes.js
=> /prodotti/strega/ricette
La notazione con .
consente di accedere alle proprietà della risorsa:
src/pages/prodotti/{Product.name}/{Product.color}.js
=> /prodotti/salsiccia/rossa
La notazione con __
consente di accedere ad un sotto-campo della risorsa:
src/pages/prodotti/{Product.fields__date__createdAt}.js
=> /prodotti/2021-02-03
CreatePage
Per creare le pagine con maggior controllo possiamo usare il punto di estensione createPages
in gatsby-node.js
e generearle dinamicamente:
exports.createPages = async function ({ actions, graphql }) {
const { data } = await graphql(query)
data.posts.forEach(node => {
const slug = node.fields.slug
actions.createPage({
path: slug,
component: require.resolve(`./src/templates/blog-post.js`),
context: { slug: slug },
})
})
}
Links
Gatsby usa @reach/router i cui vantaggi sono:
- preloading avanzato
- accessibilità
- supporto per server side rendering
- supporto per scroll restoration
- supporto per autenticazione e pagine protette
I link sono gestiti tramite il componente <Link />
import React from "react"
import { Link } from "gatsby"
const CallToAction = () => (
<p>
Leggi il mio <Link to="/blog">blog</Link>!
</p>
)
Lo scroll restoration preserva la posizione della pagina quando si naviga tra i Links.
Plugins
Gatsby offre plugins per qualsiasi cosa. Possiamo raggrupparli in:
- Fondamentali
- Source e Transformer
- Plugin per CSS & UI
- Plugin per Analytics
Qui troverai un elenco di plugin selezionati
Lo Starter Greater Gatsby
Lo starter che suggerisco è greater-gatsby, uno starter senza pagine e componenti ma con una struttura completa per sviluppare seriamente con Gatsby:
- TypeScript - aggiunge i Tipi a JavaScript
- Eslint configurato via xo e Prettier per la correzione del codice
- Storybook - per testare i componenti React
- PostCSS Styled Components con TailwindCSS tramite twin.macro
- lint-staged per la Code Quality
- Cypress per fare end-to-end testing
- Jest per fare unit testing