Disaccoppiato Drupal 8 e Gatsby.JS: il duetto ad alta velocità

Il nostro team ama esplorare e utilizzare le tendenze di sviluppo più importanti, una delle quali è l'architettura Drupal disaccoppiata. Il nostro post precedente era dedicato all'uso disaccoppiato di Drupal con JSON.API e il nostro eroe della storia di oggi sarà "il grande Gatsby". Suona come il famoso eroe del libro? No, Gatsby.JS è uno strumento JavaScript nuovo e caldo, ma promette di essere ugualmente famoso e merita un centinaio di libri! In questo post, discuteremo il suo principio di lavoro e i vantaggi dell'utilizzo disaccoppiato di Drupal 8 e Gatsby.JS. E, naturalmente, puoi sempre fare affidamento sui nostri esperti Drupal per l'implementazione di tutto.

Gatsby.JS: cos'è e come funziona

Gatsby.JS è definito un generatore di siti statici, ma si sta avvicinando a un framework front-end nelle sue capacità. Gatsby è basato su strumenti front-end molto interessanti, alcuni dei quali sono:

• React.JS — la libreria JavaScript incredibilmente popolare per la creazione di interfacce complesse
• GraphQL : il linguaggio di query super efficiente
• Webpack — il grande bundler di moduli JavaScript

Gatsby.JS è pensato per la creazione di siti statici velocissimi. Recupera i dati da qualsiasi fonte e genera contenuto statico utilizzando GraphQL. Al momento, ci sono oltre 500 plug-in di origine per stabilire la connessione tra particolari origini dati e Gatsby. Le fonti includono YouTube, Twitter, Hubspot, Shopify, Trello, Vimeo, Fogli Google, sistemi di gestione dei contenuti come Drupal, WordPress e così via.

Drupal 8 e Gatsby.JS disaccoppiati: il grande duetto e i suoi vantaggi

Una delle combinazioni più calde e vantaggiose per oggi è Gatsby e Drupal 8. Secondo l'architettura Drupal disaccoppiata o senza testa, Drupal funge solo da back-end, mentre Gatsby.JS gestisce il livello di presentazione.

Drupal 8 e Gatsby.JS sono entrambi open source, hanno una comunità ampia e attiva e un enorme ecosistema di moduli o plugin aggiuntivi. E Drupal 8 ha servizi web integrati per rendere l'integrazione un gioco da ragazzi.

Cosa rende questa combinazione così benefica? La semplicità e la velocità di un sito statico si combinano perfettamente con la potenza e la flessibilità del backend fornite dal Drupal 8 CMS. Ecco almeno alcune delle caratteristiche che otteniamo alla fine:

• Velocità impareggiabile. Gatsby.JS precarica tutte le pagine del sito Web invece di interrogare il database ogni volta su richiesta, il che rende la navigazione piacevole e sorprendentemente veloce. Gatsby è un generatore statico di PWA (progressive web app). Recupera in modo efficiente solo i file HTML, CSS e JS critici.
• Installazione facile. Con Gatsby non saranno necessari complicati processi di installazione e installazione. Costruisce il tuo sito come file statici che possono essere distribuiti rapidamente ovunque.
• Ottime caratteristiche di personalizzazione. Le combinazioni Drupal e Gatsby possono presentare straordinarie capacità di personalizzazione e autenticazione dell'utente.
• Fantastica modifica dei contenuti. Di solito, i generatori di siti statici richiedono la scrittura di contenuti in Markdown, il che potrebbe essere ingombrante per gli editor di contenuti. Ma il problema è risolto con Drupal 8 come backend! Le funzionalità di creazione di contenuti di Drupal 8 sono una gioia per qualsiasi editor di contenuti.

Uno degli esempi di utilizzo disaccoppiato di Drupal 8 e Gatsby.JS è il sito demo Umami Food Magazine. Il sito è basato sulla distribuzione senza testa di Drupal Contenta CMS con Gatsby.JS.

Se questo sembra abbastanza appetitoso, contatta subito il nostro team Drupal per combinare Drupal 8 disaccoppiato con Gatsby.JS per te! Oppure continua a leggere alcuni dettagli di implementazione.

Alcuni dettagli sull'utilizzo di Drupal 8 e Gatsby.JS

Nella configurazione disaccoppiata, entrambi i siti Drupal 8 e Gatsby devono essere preparati per lavorare insieme. Saranno collegati tramite lo speciale plug-in sorgente di Gatsby per Drupal che recupera i dati, comprese le immagini, dai siti Web di Drupal 8 con l'API JSON installata.

Quindi è necessario installare e abilitare l'API JSON e gli extra dell'API JSON forniti dai moduli Drupal, nonché abilitare il modulo di serializzazione principale sul nostro sito Web Drupal.

La nostra prossima destinazione è Configurazione — Servizi Web — Sovrascrittura API JSON .

In Impostazioni , dobbiamo assicurarci che il prefisso del percorso per l'API JSON sia /jsonapi . Questo è ciò che il sito di Gatsby dovrà sapere.

In Persone — Ruoli — Autorizzazioni diamo accesso all'elenco di risorse dell'API JSON agli utenti con tutti i ruoli, incluso quello anonimo.

Il nostro sito Drupal è pronto per l'integrazione con Gatsby e ora dobbiamo preparare il nostro sito Gatsby. Inizia con l'installazione della CLI di Gatsby:

npm install --global gatsby-cli

Quindi seguiamo tutti i passaggi per la creazione del sito nella documentazione "Inizia". Gatsby offre anche avviatori preconfigurati per la creazione di siti.

Quindi eseguiamo Gatsby con il comando, dopodiché il sito di Gatsby dovrebbe diventare disponibile su localhost:8000:

Gatsby si sviluppa

Il plug-in sorgente sopra menzionato per Drupal deve quindi essere installato sul sito di Gatsby. Successivamente, aggiungiamo la parte di codice dalla documentazione del plugin al file gatsby-config.js. L'URL dovrebbe essere cambiato in quello del nostro sito Drupal.

plugin: [
{
risolvere: `gatsby-source-drupal`,
opzioni: {
baseUrl: `https://nome-sito.com/`,
apiBase: `api`, // opzionale, il valore predefinito è `jsonapi`
},
},
]

Quindi configuriamo il nostro sito Gatsby per recuperare esattamente il contenuto di cui abbiamo bisogno da Drupal. Dobbiamo creare le pagine appropriate in /src/pages sul sito di Gatsby e aggiungere il codice per l'importazione di React al file JS.

E configuriamo GraphQL su localhost:8000/___graphql per interrogare il sito Drupal esattamente come vogliamo.

Il tutto si conclude con l'ultimo comando per pubblicare il nostro sito Gatsby con i dati Drupal:

build gatsby

Questa è solo una breve descrizione di come far funzionare Drupal 8 con Gatsby. I nostri esperti sono pronti per eseguire l'installazione esattamente secondo i vostri desideri.

Goditi la combinazione di Drupal 8 disaccoppiato e Gatsby.JS!

Se sei interessato a utilizzare Drupal 8 e Gatsby.JS disaccoppiati, su un progetto esistente o su uno nuovo, contatta i nostri sviluppatori Drupal. Il nostro team di Drupal 8 ha una grande esperienza nell'integrazione di terze parti. Ti consiglieremo la migliore configurazione disaccoppiata e, naturalmente, la implementeremo senza problemi. Godiamoci le ultime e migliori tecnologie!