Blog

02/02/2021

Headless avec Drupal8 et Gatsby ūüß°

√Čtape 1 : configurer Drupal

Il vous suffit simplement d'installer et de 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. Essayez de visiter http://yoursite.com/jsonapi 

 

√Č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 6: 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.