Entkoppelt Drupal 8 und Gatsby.JS: das Highspeed-Duett

Unser Team liebt es, heiße Trends in der Entwicklung zu erforschen und zu nutzen, von denen einer die entkoppelte Drupal-Architektur ist. Unser vorheriger Beitrag war der Verwendung von entkoppeltem Drupal mit JSON.API gewidmet, und unser heutiger Story-Held wird „der große Gatsby“ sein. Klingt es wie der berühmte Buchheld? Nein, Gatsby.JS ist ein neues und heißes JavaScript-Tool, aber es verspricht, ebenso berühmt zu werden und hundert Bücher zu verdienen! In diesem Beitrag werden wir sein Arbeitsprinzip und die Vorteile der Verwendung von entkoppeltem Drupal 8 und Gatsby.JS diskutieren. Und natürlich können Sie sich bei der Umsetzung immer auf unsere Drupal-Experten verlassen.

Gatsby.JS: was es ist und wie es funktioniert

Gatsby.JS ist als statischer Site-Generator definiert, nähert sich jedoch in seinen Kapazitäten einem Front-End-Framework. Gatsby basiert auf sehr heißen Front-End-Tools, von denen einige sind:

• React.JS – die erstaunlich beliebte JavaScript-Bibliothek zum Erstellen komplexer Schnittstellen
• GraphQL – die supereffiziente Abfragesprache
• Webpack – der großartige JavaScript-Modul-Bundler

Gatsby.JS ist für den Aufbau blitzschneller statischer Websites gedacht. Es ruft die Daten aus absolut beliebigen Quellen ab und generiert statische Inhalte mit GraphQL. Derzeit gibt es über 500 Quell-Plugins, um die Verbindung zwischen bestimmten Datenquellen und Gatsby herzustellen. Zu den Quellen gehören YouTube, Twitter, Hubspot, Shopify, Trello, Vimeo, Google Sheets, Content-Management-Systeme wie Drupal, WordPress und so weiter.

Entkoppeltes Drupal 8 und Gatsby.JS: das große Duett und seine Vorteile

Eine der heißesten und vorteilhaftesten Kombinationen für heute ist Gatsby und Drupal 8. Gemäß der entkoppelten oder kopflosen Drupal-Architektur dient Drupal nur als Backend, während Gatsby.JS die Präsentationsschicht übernimmt.

Drupal 8 und Gatsby.JS sind beide Open Source, haben eine große und aktive Community und ein riesiges Ökosystem an Zusatzmodulen oder Plugins. Und Drupal 8 verfügt über integrierte Webdienste, um die Integration zum Kinderspiel zu machen.

Was macht diese Kombination so vorteilhaft? Die Einfachheit und Geschwindigkeit einer statischen Website verbindet sich perfekt mit der Leistung und Flexibilität des Backends, das vom Drupal 8 CMS bereitgestellt wird. Hier sind zumindest einige der Funktionen, die wir am Ende erhalten:

• Unübertroffene Geschwindigkeit. Gatsby.JS ruft alle Seiten der Website vorab ab, anstatt die Datenbank jedes Mal auf Anfrage abzufragen, was die Navigation angenehm und erstaunlich schnell macht. Gatsby ist ein statischer PWA-Generator (Progressive Web App). Es ruft effizient nur die kritischen HTML-, CSS- und JS-Dateien ab.
• Einfache Einstellung. Mit Gatsby sind keine umständlichen Bereitstellungs- und Einrichtungsprozesse erforderlich. Es erstellt Ihre Website als statische Dateien, die überall schnell bereitgestellt werden können.
• Tolle Personalisierungsfunktionen. Drupal-und-Gatsby-Kombinationen können großartige Benutzerpersonalisierungs- und Authentifizierungsfunktionen bieten.
• Tolle Bearbeitung von Inhalten. Normalerweise müssen statische Website-Generatoren Inhalte in Markdown schreiben, was für Inhaltseditoren umständlich sein könnte. Aber mit Drupal 8 als Backend ist das Problem gelöst! Die Funktionen zur Inhaltserstellung von Drupal 8 sind eine Freude für jeden Inhaltseditor.

Eines der Beispiele für die Verwendung von entkoppeltem Drupal 8 und Gatsby.JS ist die Demoseite Umami Food Magazine. Die Website basiert auf der Headless-Drupal-Distribution Contenta CMS mit Gatsby.JS.

Wenn das appetitlich genug aussieht, wenden Sie sich gleich an unser Drupal-Team, um entkoppeltes Drupal 8 mit Gatsby.JS für Sie zu kombinieren! Oder lesen Sie weiter über einige Implementierungsdetails.

Einige Besonderheiten bei der Verwendung von Drupal 8 und Gatsby.JS

Im entkoppelten Setup müssen sowohl Drupal 8- als auch Gatsby-Sites darauf vorbereitet sein, zusammenzuarbeiten. Sie werden über das spezielle Source-Plugin von Gatsby für Drupal verbunden, das Daten, einschließlich Bilder, von Drupal 8-Websites mit installierter JSON-API abruft.

Daher ist es notwendig, die von Drupal-Modulen beigesteuerten JSON-API- und JSON-API-Extras zu installieren und zu aktivieren sowie das zentrale Serialisierungsmodul auf unserer Drupal-Website zu aktivieren.

Unser nächstes Ziel ist Configuration – Web Services – JSON API Overwrites .

In den Einstellungen müssen wir sicherstellen, dass das Pfadpräfix für die JSON-API /jsonapi ist. Das muss die Gatsby-Site wissen.

In Personen – Rollen – Berechtigungen gewähren wir Benutzern mit allen Rollen, einschließlich anonym, Zugriff auf die JSON-API-Liste der Ressourcen.

Unsere Drupal-Site ist bereit für die Gatsby-Integration, und wir müssen jetzt unsere Gatsby-Site vorbereiten. Es beginnt mit der Installation von Gatsbys CLI:

npm install --global gatsby-cli

Dann befolgen wir alle Schritte zum Erstellen der Website in der „Erste Schritte“-Dokumentation. Gatsby bietet auch vorkonfigurierte Starter für die Site-Erstellung an.

Dann führen wir Gatsby mit dem Befehl aus, wonach die Gatsby-Site unter localhost:8000 verfügbar sein sollte:

Gatsby entwickeln

Das oben erwähnte Source-Plugin für Drupal muss dann auf der Gatsby-Seite installiert werden. Als Nächstes fügen wir den Code aus der Dokumentation des Plugins zur Datei gatsby-config.js hinzu. Die URL sollte in die unserer Drupal-Site geändert werden.

Plugins: [
{
lösen: `gatsby-source-drupal`,
Optionen: {
baseUrl: `https://name-unserer-site.com/`,
apiBase: `api`, // optional, standardmäßig `jsonapi`
},
},
]

Anschließend konfigurieren wir unsere Gatsby-Site so, dass sie genau die Inhalte holt, die wir von Drupal benötigen. Wir müssen die entsprechenden Seiten in /src/pages auf der Gatsby-Site erstellen und den Code für den React-Import in die JS-Datei einfügen.

Und wir konfigurieren GraphQL unter localhost:8000/___graphql , um die Drupal-Site genau so abzufragen, wie wir es wollen.

Das Ganze krönt mit dem letzten Befehl, unsere Gatsby-Seite mit den Drupal-Daten zu veröffentlichen:

Gatsby bauen

Dies ist nur eine sehr kurze Beschreibung, wie Drupal 8 mit Gatsby funktioniert. Unsere Experten sind bereit, die Einrichtung genau nach Ihren Wünschen vorzunehmen.

Genießen Sie die Kombination aus entkoppeltem Drupal 8 und Gatsby.JS!

Wenn Sie daran interessiert sind, Drupal 8 und Gatsby.JS entkoppelt zu verwenden, entweder in einem bestehenden oder in einem neuen Projekt, wenden Sie sich an unsere Drupal-Entwickler. Unser Drupal 8-Team hat große Erfahrung in der Integration von Drittanbietern. Wir beraten Sie zum besten entkoppelten Setup und setzen es selbstverständlich reibungslos um. Lassen Sie uns die neuesten und besten Technologien genießen!