Drupal 8 decuplat și Gatsby.JS: duetul de mare viteză

Echipa noastră adoră să exploreze și să folosească tendințele fierbinți în dezvoltare, dintre care una este arhitectura Drupal decuplată. Postarea noastră anterioară a fost dedicată utilizării Drupal decuplat cu JSON.API, iar eroul poveștii noastre de astăzi va fi „Marele Gatsby”. Sună ca celebrul erou de carte? Nu, Gatsby.JS este un instrument JavaScript nou și fierbinte, dar promite să fie la fel de faimos și să merite o sută de cărți! În această postare, vom discuta despre principiul său de funcționare și despre beneficiile utilizării Drupal 8 și Gatsby.JS decuplate. Și, bineînțeles, vă puteți baza întotdeauna pe experții noștri Drupal pentru a le implementa pe toate.

Gatsby.JS: ce este și cum funcționează

Gatsby.JS este definit un generator de site static, dar se apropie de un cadru front-end în capacitățile sale. Gatsby este construit pe instrumente frontale foarte fierbinți, dintre care unele sunt:

• React.JS — biblioteca JavaScript uimitor de populară pentru construirea de interfețe complexe
• GraphQL — limbajul de interogare super eficient
• Webpack — marele bundler de module JavaScript

Gatsby.JS este conceput pentru a construi site-uri statice extrem de rapide. Le preia datele din absolut orice sursă și generează conținut static folosind GraphQL. În acest moment, există peste 500 de pluginuri sursă pentru a stabili conexiunea între anumite surse de date și Gatsby. Sursele includ YouTube, Twitter, Hubspot, Shopify, Trello, Vimeo, Google Sheets, sisteme de gestionare a conținutului precum Drupal, WordPress și așa mai departe.

Drupal 8 decuplat și Gatsby.JS: marele duet și beneficiile sale

Una dintre cele mai tari și mai benefice combinații pentru astăzi este Gatsby și Drupal 8. Conform arhitecturii Drupal decuplate sau fără cap, Drupal servește doar ca backend, în timp ce Gatsby.JS se ocupă de stratul de prezentare.

Drupal 8 și Gatsby.JS sunt ambele open-source, au o comunitate mare și activă și un ecosistem uriaș de module suplimentare sau pluginuri. Și Drupal 8 are servicii web încorporate pentru a face integrarea o briză.

Ce face această combinație atât de benefică? Simplitatea și viteza unui site static se combină perfect cu puterea și flexibilitatea backend-ului oferit de Drupal 8 CMS. Iată cel puțin câteva dintre caracteristicile pe care le obținem în final:

• Viteză de neegalat. Gatsby.JS preia toate paginile site-ului web în loc să interogheze baza de date de fiecare dată la cerere, ceea ce face navigarea plăcută și uimitor de rapidă. Gatsby este un generator static PWA (aplicație web progresivă). Preia eficient doar fișierele critice HTML, CSS și JS.
• Configurare ușoară. Nu vor fi necesare procese greoaie de instalare și configurare cu Gatsby. Îți construiește site-ul ca fișiere statice care pot fi implementate rapid oriunde.
• Funcții excelente de personalizare. Combinațiile Drupal și Gatsby pot prezenta capabilități uimitoare de personalizare și autentificare a utilizatorilor.
• Editare de conținut minunată. De obicei, generatorii de site-uri statice au nevoie de scrierea conținutului în Markdown, ceea ce ar putea fi greoi pentru editorii de conținut. Dar problema este rezolvată cu Drupal 8 ca backend! Funcțiile de creare de conținut Drupal 8 sunt o bucurie pentru orice editor de conținut.

Unul dintre exemplele de utilizare a Drupal 8 decuplat și Gatsby.JS este site-ul demonstrativ Umami Food Magazine. Site-ul este construit pe Contenta CMS de distribuție Drupal fără cap cu Gatsby.JS.

Dacă acest lucru pare suficient de apetisant, contactați echipa noastră Drupal chiar acum pentru a combina Drupal 8 decuplat cu Gatsby.JS pentru dvs.! Sau continuați să citiți despre unele detalii de implementare.

Câteva detalii despre utilizarea Drupal 8 și Gatsby.JS

În configurația decuplată, ambele site-uri Drupal 8 și Gatsby trebuie să fie pregătite pentru a lucra împreună. Acestea vor fi conectate prin intermediul pluginului special Gatsby sursă pentru Drupal, care preia date, inclusiv imagini, de pe site-urile web Drupal 8 cu JSON API instalat.

Prin urmare, este necesar să instalați și să activați modulele Drupal care au contribuit la API-ul JSON și API-ul JSON, precum și să activați modulul de serializare de bază pe site-ul nostru web Drupal.

Următoarea noastră destinație este Configurare — Servicii web — Suprascrieri API JSON .

În Setări , trebuie să ne asigurăm că prefixul de cale pentru API-ul JSON este /jsonapi . Acesta este ceea ce site-ul Gatsby va trebui să știe.

În Persoane — Roluri — Permisiuni , oferim acces la lista de resurse JSON API utilizatorilor cu toate rolurile, inclusiv anonimii.

Site-ul nostru Drupal este pregătit pentru integrarea Gatsby și acum trebuie să pregătim site-ul nostru Gatsby. Începe cu instalarea CLI-ului lui Gatsby:

npm install --global gatsby-cli

Apoi urmăm toți pașii de creare a site-ului din documentația „Începeți”. Gatsby oferă, de asemenea, startere preconfigurate pentru crearea site-ului.

Apoi rulăm Gatsby cu comanda, după care site-ul Gatsby ar trebui să devină disponibil la localhost:8000:

gatsby dezvolta

Pluginul sursă menționat mai sus pentru Drupal trebuie apoi instalat pe site-ul Gatsby. Apoi, adăugăm fragmentul de cod din documentația pluginului în fișierul gatsby-config.js. URL-ul ar trebui schimbat în cel al site-ului nostru Drupal.

pluginuri: [
{
rezolvare: `gatsby-source-drupal`,
Opțiuni: {
bazaUrl: `https://our-site-name.com/`,
apiBase: `api`, // opțional, implicit la `jsonapi`
},
},
]

Configuram apoi site-ul nostru Gatsby pentru a prelua exact conținutul de care avem nevoie de la Drupal. Trebuie să creăm paginile corespunzătoare în /src/pages pe site-ul Gatsby și să adăugăm codul pentru importul React în fișierul JS.

Și configuram GraphQL la localhost:8000/___graphql pentru a interoga site-ul Drupal exact așa cum ne dorim.

Totul se încununează cu ultima comandă de a publica site-ul nostru Gatsby cu datele Drupal:

gatsby build

Aceasta este doar o descriere foarte scurtă a modului în care Drupal 8 funcționează cu Gatsby. Experții noștri sunt gata să facă configurarea exact în conformitate cu dorințele dumneavoastră.

Bucurați-vă de combinația dintre Drupal 8 decuplat și Gatsby.JS!

Dacă sunteți interesat să utilizați Drupal 8 și Gatsby.JS decuplate, fie pe un proiect existent, fie pe unul nou, contactați dezvoltatorii noștri Drupal. Echipa noastră Drupal 8 are o mare experiență în integrarea terților. Vă vom sfătui cea mai bună configurație decuplată și, desigur, o implementăm fără probleme. Să ne bucurăm de cele mai noi și mai bune tehnologii!