Gatsby Step 1: Sviluppo Agile

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.