L'utilisation de Drupal avec Gatsby est un excellent moyen d'obtenir un site de qualité associé à une excellente expérience de développement moderne et profiter de tous les avantages de JAMstack, tels que la performance, l'évolutivité et la sécurité.
Nous expliquons en quelques étapes comment utiliser Gatsby avec Drupal en mode découplé :
Étape 1 : configurer Drupal
Il vous suffit simplement d'installer et configurer le module API JSON pour Drupal8
-> composer require drupal/jsonapi
Il ne nous reste plus qu'à nous assurer d'accorder aux utilisateurs anonymes l'autorisation de lecture sur l'API. Pour ce faire, accédez à la page des autorisations et cochez la case "Utilisateurs anonymes" en bas de l'autorisation "Accéder à la liste des ressources de l'API JSON".
Après cela, vous devriez être prêt.
Étape 2 : installer GatsbyJS
Pour installer gatsby exécuter : npm install --global gatsby-cli et vous pouvez ensuite créer un nouveau projet,
comme ceci: npm install --global gatsby-cli
Cette commande clone simplement le dépôt de démarrage par défaut de Gatsby, puis installe ses dépendances à l'intérieur
Une fois terminé, vous disposez des bases d'un site Gatsby opérationnel. Mais cela ne nous suffit pas! Nous devons d'abord lié Drupal et Gatsby.
Étape 3 : Lié GatsbyJS et Drupal
Pour cette partie, nous utiliserons le plugin gatsby-source-drupal pour Gatsby. Tout d'abord, nous devons l'installer:
cd yoursitename
npm install --save gatsby-source-drupal
Une fois cela fait, il nous suffit d'ajouter un tout petit peu de configuration pour que Gatsby connaisse l'URL de notre site Drupal. Pour ce faire, éditez le fichier gatsby-config.js et ajoutez ce petit extrait à la section "plugins":
plugins: [
{
resolve: `gatsby-source-drupal`,
options: {
baseUrl: `http://YOURSITE.COM`,
},
},
]
C'est toute la configuration nécessaire, et maintenant nous sommes prêts à exécuter Gatsby et à lui faire consommer des données Drupal.
Étape 4 : Exécutez Gatsby
Exécutez ceci pour faire fonctionner Gatsby:
gatsby develop
Vous pouvez maintenant afficher gatsby-starter-default dans le navigateur.
http: // localhost: 8000 /
Étape 5 : Récupérer les données de Drupal avec GraphQL
Affichez GraphQL pour explorer les données et le schéma de votre site
http: // localhost: 8000 / ___ graphql
Étape 6: Affichage des données Drupal sur le site Gatsby
Dans votre base de code, consultez src/pages/index.js et vous devriez voir du contenu. Supprimez tout ce qu'il contient et remplacez-le par ceci :
const SecondPage = ({data}) => (
<Layout>
<h1>{ data.allRecipes.edges[0].node.title }</h1>
</Layout>
)
export default SecondPage
export const query = graphql`
query {
allRecipes {
edges {
node {
title
}
}
}
}
Étape 7: Build du site
Exécutez simplement "gatsby build" et il exportera un site statique réel que vous pourrez déployer où vous le souhaitez, comme Netlify.
Nous avons pu profiter de cette architecture pour créé le site de l'agence web Fullwave.
