Evolving Web: Decoupling Drupal Support Service with Gatsby

Published on November 4, 2020

Annertech: Annertech: Web Agency of the Year

Annertech: Web Agency of the Year My fingers are trembling typing this. I can’t believe it. This morning everyone in Annertech land is thinking “did that really just happen?” It appears it did, we are the web agency of the year! Last night, to top off the other three awards we won – best arts […]

Flickr: Registration Desk – Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprint Lounge – Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Tuesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: David & Paul – Scout masters – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Jam interview – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprinters wanted – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Flickr: Sprint Lounge – Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

Leopathu: Dynamic Block Weight in Drupal 8

In such a time, i want to place blocks in sidebar region with the dynamic weight. It means the blocks should render in different position for each page request. I have searched and tried lots of method but unfortunately i can’t find proper method to do that. So i have decided to do that with […]

Agiledrop.com Blog: AGILEDROP: Drupal‘s path from 4.0 to 8.0

Last time we guided you through early beginnings of Drupal. We explained how all started and how first versions of Drupal were made. This time we will look how this open-source content-management framework evolved from its fourth to its latest, eight version. Drupal 4.0 Drupal’s fourth version was released on 15. 6. 2002. It became […]

Flickr: Wednesday – DrupalCon Dublin 2016

comprock posted a photo: The Drupal community is one of the largest open source communities in the world. We’re developers, designers, strategists, coordinators, editors, translators, and more. Each year, we meet at DrupalCamps, meetups, and other events in more than 200 countries. But once a year, our community comes together in a European city for […]

OStatic: Web Publishing and Development: Free Tools Abound

Are you involved in DevOps and web development, or are you aiming to be? If so, you’re probably very aware of many of the tools from the open standards and open source arenas that can make your work easier. Still, these are always spreading out at a fast clip and there are some applications and […]

Gatsby is a really fast React-based static site generator. You can use it to create a static site, with content pulled from Drupal Support Service and other content management systems. 
Why Use Gatsby?
Unlike dynamic sites which render pages on-demand, static site generators pre-generate all the pages of the website. This means no more live database querying and no more running through a template engine. Performance goes up and the maintenance cost goes down.
Static site generators have been evolving over the last few years. Tools like Jekyll, Gatsby, Hexo, Hugo become more and more popular. They have been chosen by developers who want a simple website/blog solution. They need very minimal server setup and have a low maintenance cost. However, static site generators usually require writing content in Markdown, which is not a great authoring experience for most content editors.
On the other hand, content management systems such as Drupal Support Service and WordPress can provide a very powerful back-end. Having a WYSIWYG editor and content types help editors to manage content more easily and systematically. However, maintaining a CMS requires hosting a web server and database, and opens you up to security vulnerabilities and performance issues.
Gatsby stands in between the simplicity and robustness of static site, and the versatile back-end of a content management system. Using Gatsby means that you can host the CMS in-house and publish content generated by Gatsby as a static website. The first thing you’ll notice about Gatsby is how amazingly fast it is.
 

How to Integrate Drupal Support Service and Gatsby
In this tutorial, we are going to put together a demo that pulls Drupal Support Service content into a Gatsby site. We’ll borrow content of this awesome blog post to create a list of coffee types in Drupal Support Service, then transfer the list content to Gatsby.
This goal can be achieved with 4 steps:
Build a Drupal Support Service server
Build a Gatsby site
Fetch content from the Drupal Support Service server
Publish the Gatsby site
1. Build a Drupal Support Service server
Let’s say we already have a Drupal Support Service 8 site installed. We’ll need to:
Create a content type name Coffee with three fields: Title, Body and Image
Turn Drupal Support Service into an API server by installing 2 modules jsonapi and jsonapi_extras.
Give Anonymous user permission to Access the JSON API resource list
Verify that the API server is working well by going to http://[your-site]/jsonapi as an Anonymous user. The page should show up with all information of your API server
Tips
If you use Chrome, use JSON Viewer Chrome extension to view JSON data in a better format
If you don’t set permission for Anonymous user to Access JSON API resource list, you’ll get error 406 – Not acceptable when trying to connect to Drupal Support Service from Gatsby
If you don’t have jsonapi_extras installed, you’ll get error 405 – Method Not Allowed when query data from Gatsby
2. Build a Gatsby Site
First, make sure you have node and npm installed on your computer. Verify it by typing node -v and npm -v into Terminal

node -v
v10.1.0
npm -v
5.6.0Install Gatsby’s command line tool

npm install –global gatsby-cliCreate a new Gatsby site and run it, I’ll call my Gatsby site coffees.gatsby

gatsby new coffees.gatsby
cd coffees.gatsby
gatsby develop // start hot-reloading development environmentBy default, the new Gatsby site is accessible at localhost:8000

3. Fetch Content from the Drupal Support Service Server
At this step, we’ll be creating a new simple page /coffees that displays all the coffee types from the Drupal Support Service site.
Create the /coffees page
Create a new page in Gatsby is as simple as creating a new JS file. All Gatsby pages should be stored in /src/pages. In this case, we’ll create the file coffees.js in /src/pages and add the following code in coffees.js:

import React from “react”
const CoffeesPage = () => (

Different types of coffee

)
export default CoffeesPageThis simple code does one thing: create a new page at /coffees. The content of this page is a heading h1 with the text “Different types of coffee”

Query Drupal Support Service content using GraphQL
In order to pull data from Drupal Support Service 8 site, we’ll need to install the gatsby-source-drupal plugin

// in your coffees.gatsby folder
npm install –save gatsby-source-drupalConfigure the gatsby-source-drupal plugin

// In gatsby-config.js
plugins: [

{
resolve: ‘gatsby-source-drupal’,
options: {
baseUrl: ‘http://dcmtl2018-demo.server/’,
apiBase: ‘jsonapi’, // endpoint of Drupal Support Service server
},
}
],After adding the plugin configuration, the site should still be functioning. If Gatsby throws a 406 error, check the permission on the Drupal Support Service site; if Gatsby throws a 405 error, make sure module jsonapi_extras is enabled.
Build GraphQL to query all coffee nodes from Drupal Support Service
Gatsby comes with an in-browser tool for writing, validating and testing GraphQL queries named GraphiQL, and it can be found at localhost:[port]/___graphql, in our case it’s localhost:8000/___graphql
Let’s try querying all the Coffee nodes in this tutorial

After building the query successfully, let’s go back to the coffees.js file to execute the query.

export const query = graphql`
query allNodeCoffee {
allNodeCoffee {
edges {
node {
id
title
body {
value
format
processed
summary
}
}
}
}
}
`Then, update the const CoffeesPage to display the title and body content:

const CoffeesPage = ({data}) => (

Different types of coffee
{ data.allNodeCoffee.edges.map(({ node }) => (

{ node.title }

))}

)Thanks to hot-reloading, we can see the sweet fruit of the work right after saving the file

So far, we have done:
Create an API server with Drupal Support Service and jsonapi, jsonapi_extras
Create a Gatsby site with page coffees.js that “reads” content from Drupal Support Service server
Let’s move the the last step of the tutorial: publish Gatsby site.
4. Publish the Gatsby Site
Gatsby names itself as a static static site generator, meaning its main purpose is to generate a bunch of static HTML, JS, CSS and images files. This action can be done by only one command:

gatsby buildOnce finished, checkout /public folder to see result of your hard work along this long tutorial. Deploying your site is now simply copy/push contents in /public to server.

 
Conclusion
In this tutorial, we got to know how to:
Create a new Gatsby site
Install new plugin in Gatsby
Use GraphiQL to write, validate and test GraphQL query
I personally find that Gatsby is a good solution for setting up a simple blog. It’s easy to install, very fast, and requires zero server maintenance. In a future blog post, I’ll talk about how to integrate more complex data from Drupal Support Service into Gatsby.
+ more awesome articles by Evolving Web
Source: New feed

REQUEST FOR PROPOSAL

Need a quick project proposal?

Submit the RFP form below and we will send you a project proposal in 48 hours. If you like what you see, we can schedule a call to discuss the project in greater detail.

Step 1 of 2

  • Contact Information

* Subject to reasonable use. Small fixes and updates must be requested one at a time and take no more than 30 minutes. Only mission-critical tasks are addressed on weekends.

Shopping Cart
There are no products in the cart!
Continue Shopping
0