Gatsby JS e Drupal: come utilizzarli insieme

Gatsby JS : Il framework Javascript Open Source per sviluppare portali web.

GatsbyJS è un framework javascript open source e completamente free basato su React che consente di sviluppare portali web sicuri e veloci.
Gatsby può essere utilizzato sia per creare progressive web apps statiche sia per creare portali dinamici in quanto include le funzionalità di Reactjs e aderisce agli ultimi standard web in maniera altamente performante.
Gatsby è ottimo in tutti i casi in cui abbiamo a che fare con la generazione di siti statici e quindi non risulta strettamente necessario effettuare grandi e frequenti modifiche di contenuto.
Al momento Gatsbyjs è utilizzato in maniera efficiente per la costruzione di blog, e-commerce e siti vetrina tra cui segnaliamo ad esempio questo, mentre a questo link, invece, è possibile visualizzare una lista dei case studies di gatsby.

In questo articolo andremo a vedere come è possibile utilizzare GatsbyJS integrando Drupal come sorgente dati,
Gatsby infatti, può ottenere i dati da molteplici sorgenti come: API, CMS, databases, markdown e altre tipologie di sorgenti, utilizzando GraphQL.
Questo framework javascript è spesso definito come uno “static site generator” ma, ad ogni modo, ogni installazione di Gatsby è un' app React a tutti gli effetti.
Al momento Gatsby conta più di 360 starter kits che consentono di costruire rapidamente un portale basato su questo framework e sono disponibili più di 1900 plugins che consentono di utilizzare dati provenienti da molteplici sorgenti (incluso Drupal).
Il deploy di portali basati su Gatsby risulta anche molto semplice e intuitivo e per ottenere portali web ad alte prestazioni, Gatsby utilizza tecniche come: il prefetching, il lazy loading e il server side rendering.

Drupal CMS: come utilizzarlo per servire dati a un frontend generato con Gatsby

Nella sua funzione di CMS enterprise, Drupal può fornire una fonte di dati potente e flessibile a un front end generato con Gatsby.
Per questo motivo, l'idea di utilizzare Drupal e Gatsby ha ispirato molto la community Drupal, soprattutto in quanto l’accoppiata Gatsby - Drupal migliora drasticamente i tempi di caricamento del portale e di conseguenza l’esperienza utente.

Configurare Drupal e GatsbyJS

Diamo un'occhiata a come collegare Gatsby e Drupal .
Per farlo, avremo bisogno di:

• Un front end Gatsby installabile tramite npm
• Un portale Drupal installabile tramite Composer
• Il plugin sorgente (gatsby-source-drupal) necessario a collegarli

1. Setup lato Gatsby

Installiamo Gatsby utilizzando il seguente comando:
“npm install -g gatsby-cli”
Creiamo poi un nuovo progetto Gatsby utilizzando il comando:
“gatsby new {nomeprogetto} && cd {nomeprogetto}”
Lanciamo poi il comando che ci consente di avviare il server di sviluppo:
“gatsby develop”

2. Setup lato Drupal

Gatsby è pronto.
È quindi il momento di utilizzare il portale web Drupal come sorgente.
Sul nostro portale Drupal, installiamo e abilitiamo il modulo JSON API, presente nel core di Drupal dalla versione 8.7 in poi.
Il modulo si occuperà di rendere disponibili gli endpoint per noi.

3. Connettere Gatsby con Drupal

Per connettere Gatsby con Drupal installiamo quindi il plugin sorgente disponibile qui con il seguente comando:
“npm install --save gatsby-source-drupal”
Modifichiamo poi, il file config.js presente all’interno dell’installazione di Gatsby aggiungendo il nuovo plugin e impostando il baseUrl dell’installazione di Drupal come di seguito:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-drupal` ,
      options: {
        baseUrl: `https://live-contentacms.pantheonsite.io/`,
        apiBase: `api`, //  optional, defaults to `jsonapi`
      },
    },
  ],
}

Lanciamo nuovamente il comando “gatsby develop”.
Al termine dell’esecuzione di questo comando saremo in grado di effettuare query sui nodi di Drupal.
Ci colleghiamo, per visualizzare GraphiQL, con il nostro browser al seguente link: http://{URLGatsby}/___graphql.
Da lì sarà possibile ottenere i dati da Drupal tramite GraphQL, come, ad esempio, quelli creati da Drupal con titolo, identificativo e data di creazione. Possiamo lanciare la seguente query:

{
  allArticle {
    edges {
      node {
        title
        internalId
        created(formatString:"DD-MMM-YYYY")
      }
    }
  }
}