Drupal 8 découplé et Gatsby.JS : le duo à grande vitesse

Notre équipe adore explorer et utiliser les dernières tendances en matière de développement, dont l'une est l'architecture Drupal découplée. Notre article précédent était consacré à l'utilisation de Drupal découplé avec JSON.API, et le héros de notre histoire d'aujourd'hui sera "Gatsby le Magnifique". Cela ressemble-t-il au célèbre héros du livre? Non, Gatsby.JS est un nouvel outil JavaScript en vogue, mais il promet d'être tout aussi célèbre et mérite une centaine de livres ! Dans cet article, nous aborderons son principe de fonctionnement et les avantages d'utiliser Drupal 8 découplé et Gatsby.JS. Et, bien sûr, vous pouvez toujours compter sur nos experts Drupal pour tout mettre en œuvre.

Gatsby.JS : qu'est-ce que c'est et comment ça marche

Gatsby.JS est défini comme un générateur de site statique, mais il se rapproche d'un framework frontal dans ses capacités. Gatsby est construit sur des outils frontaux très performants, dont certains sont :

• React.JS - la bibliothèque JavaScript incroyablement populaire pour la création d'interfaces complexes
• GraphQL — le langage de requête super efficace
• Webpack - le grand bundle de modules JavaScript

Gatsby.JS est destiné à la création de sites statiques extrêmement rapides. Il leur récupère les données à partir d'absolument toutes les sources et génère du contenu statique à l'aide de GraphQL. À l'heure actuelle, il existe plus de 500 plugins source pour établir la connexion entre des sources de données particulières et Gatsby. Les sources incluent YouTube, Twitter, Hubspot, Shopify, Trello, Vimeo, Google Sheets, des systèmes de gestion de contenu comme Drupal, WordPress, etc.

Drupal 8 découplé et Gatsby.JS : le grand duo et ses bienfaits

L'une des combinaisons les plus chaudes et les plus bénéfiques pour aujourd'hui est Gatsby et Drupal 8. Selon l'architecture Drupal découplée ou sans tête, Drupal sert uniquement de backend, tandis que Gatsby.JS gère la couche de présentation.

Drupal 8 et Gatsby.JS sont tous deux open source, disposent d'une communauté importante et active et d'un vaste écosystème de modules complémentaires ou de plugins. Et Drupal 8 dispose de services Web intégrés pour faciliter l'intégration.

Qu'est-ce qui rend cette combinaison si bénéfique? La simplicité et la rapidité d'un site statique se combinent parfaitement avec la puissance et la flexibilité du backend fournies par le CMS Drupal 8. Voici au moins certaines des fonctionnalités que nous obtenons à la fin :

• Vitesse inégalée. Gatsby.JS pré-extrait toutes les pages du site Web au lieu d'interroger la base de données à chaque fois à la demande, ce qui rend la navigation agréable et incroyablement rapide. Gatsby est un générateur de PWA (progressive web app) statique. Il récupère efficacement uniquement les fichiers HTML, CSS et JS critiques.
• Installation facile. Aucun processus de déploiement et de configuration fastidieux ne sera nécessaire avec Gatsby. Il construit votre site sous forme de fichiers statiques qui peuvent être rapidement déployés n'importe où.
• Grandes fonctionnalités de personnalisation. Les combinaisons Drupal et Gatsby peuvent offrir d'impressionnantes capacités de personnalisation et d'authentification des utilisateurs.
• Impressionnante édition de contenu. Habituellement, les générateurs de sites statiques ont besoin d'écrire du contenu dans Markdown, ce qui peut être fastidieux pour les éditeurs de contenu. Mais le problème est résolu avec Drupal 8 en backend ! Les fonctionnalités de création de contenu de Drupal 8 sont une joie pour tout éditeur de contenu.

Un des exemples d'utilisation découplée de Drupal 8 et Gatsby.JS est le site de démonstration Umami Food Magazine. Le site est construit sur la distribution Drupal sans tête Contenta CMS avec Gatsby.JS.

Si cela semble assez appétissant, contactez notre équipe Drupal dès maintenant pour combiner Drupal 8 découplé avec Gatsby.JS pour vous ! Ou continuez à lire sur certains détails de mise en œuvre.

Quelques spécificités d'utilisation de Drupal 8 et Gatsby.JS

Dans la configuration découplée, les sites Drupal 8 et Gatsby doivent être prêts à fonctionner ensemble. Ils seront connectés au moyen du plugin source spécial de Gatsby pour Drupal qui récupère les données, y compris les images, des sites Web Drupal 8 avec l'API JSON installée.

Il est donc nécessaire d'installer et d'activer les modules Drupal fournis par l'API JSON et les extras de l'API JSON, ainsi que d'activer le module principal de sérialisation sur notre site Web Drupal.

Notre prochaine destination est Configuration — Web Services — JSON API Overwrites .

Dans Settings , nous devons nous assurer que le préfixe de chemin pour l'API JSON est /jsonapi . C'est ce que le site Gatsby devra savoir.

Dans Personnes — Rôles — Autorisations, nous donnons accès à la liste des ressources de l'API JSON aux utilisateurs avec tous les rôles, y compris anonymes.

Notre site Drupal est prêt pour l'intégration de Gatsby, et nous devons maintenant préparer notre site Gatsby. Cela commence par l'installation de la CLI de Gatsby :

npm installer --global gatsby-cli

Ensuite, nous suivons toutes les étapes de création de site dans la documentation "Get started". Gatsby propose également des démarreurs préconfigurés pour la création de sites.

Ensuite, nous exécutons Gatsby avec la commande, après quoi le site Gatsby devrait devenir disponible sur localhost:8000 :

développer gatsby

Le plugin source mentionné ci-dessus pour Drupal doit ensuite être installé sur le site Gatsby. Ensuite, nous ajoutons le morceau de code de la documentation du plugin au fichier gatsby-config.js. L'URL doit être remplacée par celle de notre site Drupal.

plugins : [
{
résoudre : `gatsby-source-drupal`,
option : {
baseUrl : `https://nom-de-notre-site.com/`,
apiBase : `api`, // facultatif, la valeur par défaut est `jsonapi`
},
},
]

Nous configurons ensuite notre site Gatsby pour récupérer exactement le contenu dont nous avons besoin de Drupal. Nous devons créer les pages appropriées dans /src/pages sur le site Gatsby et ajouter le code pour l'importation React dans le fichier JS.

Et nous configurons GraphQL sur localhost:8000/___graphql pour interroger le site Drupal exactement comme nous le souhaitons.

Le tout se couronne avec la dernière commande pour publier notre site Gatsby avec les données Drupal :

construction gatsby

Ceci est juste une très brève description du fonctionnement de Drupal 8 avec Gatsby. Nos experts sont prêts à faire l'installation exactement selon vos souhaits.

Profitez de la combinaison de Drupal 8 découplé et de Gatsby.JS !

Si vous souhaitez utiliser Drupal 8 découplé et Gatsby.JS, que ce soit sur un projet existant ou sur un nouveau, contactez nos développeurs Drupal. Notre équipe Drupal 8 a une grande expérience dans l'intégration de tiers. Nous vous conseillerons la meilleure configuration découplée et, bien sûr, la mettrons en œuvre en douceur. Profitons des technologies les plus récentes et les plus performantes !