Sommario
  1. L'Ambiente di Sviluppo
    1. La Console CLI
    2. NodeJS
    3. Yarn
    4. GIT
    5. Creare un nuovo sito con Gatsby CLI
    6. VsCode
  2. Basi di Web Development
  3. Applicazioni 12 Factor e Configurazione Gatsby

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

Console Pop Os

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

Logo NodeJs

NodeJs esegue codice JavaScript fuori dal browser.

Leggi la breve guida a NodeJs

Yarn

Logo Yarn

Yarn gestisce pacchetti e librerie per il web development.

Leggi la breve guida a Yarn

GIT

Loghi git github gitlab

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

Schermata 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

Logo 12 factor

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.