Sommario
Gatsby Step 1: Sviluppo Agile
Scopri i vantaggi delle app a 12 Fattori e degli strumenti di sviluppo moderni
La mission di GatsbyJs è fornire gli strumenti per uno sviluppo rapido e agile.
Se sei un programmatore e conosci nodejs questo è tutto quello che devi spere:
yarn add global gatsby-cli
gatsby new esempio https://github.com/rbutera/greater-gatsby
cd esempio
gatsby develop
Il sito esempio
basato sullo starter greater-gatsby
è pronto su localhost:8000.
Puoi ora passare alla parte sui 12-factor.
Se sei alle prime armi con il web development continua pure con il resto dell'articolo.
L'Ambiente di Sviluppo
Gatsby è scritto in NodeJs e per usare questi ed altri strumenti useremo la console.
La Console CLI
La console, o terminale, è l'interfaccia testuale con la quale comunichiamo col computer.
Leggi la breve guida alla console se vuoi sapere come usarla o come usarla meglio.
NodeJS
NodeJs esegue codice JavaScript fuori dal browser.
Leggi la breve guida a NodeJs
Yarn
Yarn gestisce pacchetti e librerie per il web development.
Leggi la breve guida a Yarn
GIT
GIT è un sitema di controllo di versione. Consente di tenere traccia dei cambiamenti apportati ai file di testo.
Serve anche per clonare uno "starter" in Gatsby.
Leggi la breve guida a GIT
Creare un nuovo sito con Gatsby CLI
Tramite il gestore di pacchetti yarn
installiamo gatsby-cli
globalmente:
yarn add global gatsby-cli
per vedere i comandi disponibili:
gatsby --help
creiamo un nuovo sito di esempio
gatsby new esempio https://github.com/rbutera/greater-gatsby
cd esempio
gatsby develop
Naviga su localhost:8000 per vedere il risultato.
VsCode
VsCode (VisualStudio) è un editor gratuito per scrivere codice.
Leggi la breve guida a VsCode
Basi di Web Development
Se è la prima volta che affronti lo sviluppo web ci saranno alcune cose che imparerai con Gatsby. Questi sono i principali strumenti del frontend developer:
- HTML : la struttura informativa del sito, definisce cose come titoli e paragrafi, sta per HyperText Markup Language (Linguaggio di Markup per IperTesti)
- CSS : lo stile del sito, definisce cose come caratteri, colori e layout, sta per Cascading Style Sheets (Fogli di Stile a Cascata)
- JavaScript : linguaggio di programmazione per rendere il web interattivo
- React : libreria JavaScript per la creazione di interfacce utente
- GraphQL : linguaggio di query per gestire i dati nel sito
Applicazioni 12 Factor e Configurazione Gatsby
Twelve-Factor App è una metodologia per la creazione di applicazioni portabili e resilienti.
Leggi la breve guida ai 12-factor
Il cuore dei 12 fattori è la configurazione e Gatsby la gestisce in modo egregio nel file gatsby-config.js
:
module.exports = {
siteMetadata: {
title: 'Hello World',
description: 'This is my hello world site',
siteUrl: process.env.SITE_URL
},
plugins: [
{
resolve: 'gatsby-plugin-gtag',
options: {
trackingId: process.env.GA_TRACKING_ID
}
},
{
resolve: 'gatsby-plugin-facebook-pixel',
options: {
pixelId: process.env.FB_PIXEL_ID
}
},
],
};
Nella prossima parte vedremo com'è fatto uno starter e come configurarlo.