Drupal as a headless CMS with Gatsby

  0 comments

 

Install Drupal 8 (https://www.drupal.org/docs/installing-drupal). Which we will use as backend.

  • Create nodes for article or page content type.
  • Install JSON: API module which provides an endpoint for these two content type automatically.
  • To verify access visit this URL HOST+ /jsonapi/node/article. It will return article in json format.

Now we will create frontend using Gatsby

  • Install Node.js according to your operating system from here https://nodejs.org/en/download/ and install it. After installing it run this command. npm –v To make sure Node.js installed successfully or not.
  • Install the Gatsby CLI
    npm install -g gatsby-cli The above command installs Gatsby CLI globally on your machine. After running the above command you will able the Gatsby on command line. Run the command gatsby –v command. To make sure Gatsby CLI installed successfully or not.
  • Create a new site
    gatsby new gatsby-drupal-frontend Run this command to create Gatsby blank site
  • Change directories into site folder
    cd gatsby-drupal-frontend
  • Start development server
    gatsby develop
    If all will good then you will see Gatsby default starter page
     

    gatsby-default

  • Now install gatsby-source-drupal plugin to use drupal data in gatsby.
    npm install --save gatsby-source-drupal
    Run this command to install this plugin in Gatsby

     

    console
  • Now open Gatsby-config.js which will exist in Gatsby root folder and add this piece of JSON code in plugin option.

     

    { resolve: `gatsby-source-drupal`, options: { baseUrl: `http://gatsby-drupal-backend.lndo.site/`, }, }

     

    graphql

    Update your baseUrl with your own website URL.

  • Now run Gatsby develop. Now you will see message in console that it’s fetching data from drupal end.

    gatsbydevelop

  • Now the data has been import into Drupal. You can check the data by visiting URL http://localhost:8000/___graphql . Now data from our Drupal site is available to our Gatsby front end. Now you can get data of drupal using graphql. Step to get data of article content type
    • Click on allNodeArticle

      article

    • Select option whatever you want to get

      selectoption

      I have selected body, title and image So my query will be

      graphql2

      To get the code for Gatsby you can click on code exporter and it will get relevant code which will use in Gatsby.

  • Now we have a query so we will create a list of articles on the home page.
     
  • Open index.js file and import graphql and useStaticQuery

    import

  • And replace IndexPage function with following code

    code

  • Now visit http://localhost:8000/ and you will see something like this page
     
  • home page

Add new comment