Headless Drupal with Gatsby.js

I want to show you how cool combination is frontend build with Gatsby.js and Drupal8 as a CMS.

Gatsby.js is super fast static site generator built with React.j and GraphQL. The project is pretty well documented and the comunity is big. Visit Gatsby.js website to learn more.

The other key component in the blog is the CMS. I am a big Drupal fan. It is poweful platform for content management.

Let's build a simple travel blog based on these two solid technologies. I will split this article to three parts.

Headless Drupal with Gatsby.js (part 2) - setup Drupal / Headless Drupal with Gatsby.js (part 3) - make them work together

Headless Drupal with Gatsby.js (part 1) - setup Gatsby.js

Let me introduce you my favourite frontend framework.

About Gatsby.js

With Gatsby.js you can create blazing fast apps and websites without need to be a performance expert. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is 100% optimized. Pull data from CMSs, SaaS services, APIs, databases, your file system & more—directly into your pages using GraphQL. Gatsby.js doesn’t require complex scaling operations or expensive hosting.

Install it

It is very easy to install Gatsby. Just open a terminal and follow the steps:

  • installing the Gatsby CLI - npm install -g gatsby-cli
  • create a new site - gatsby new gatsby-site
  • change directories into site folder - cd gatsby-site
  • start development server - gatsby develop
  • open the website on http://localhost:8000

Gatsby uses GraphQL to pull in data from external sources and query for bits of it to use in your markup. Let’s take a look at how it works. When you ran gatsby develop earlier, you may have noticed a few lines that mention GraphQL. It says we can visit http://localhost:8000/_graphql to explore our site’s data and schema using the GraphiQL IDE. Let’s hit that URL and see what’s up.

On the left side we can write queries and see the result of the query on the right side. I like to come to this interface, experiment with queries, then copy and paste that query right into my app.

Gatsby comunity developed gatsby-source-drupal plugin to make pulling data from Drupal easy. To install it just paste npm install --save gatsby-source-drupal in the terminal (in the project folder).

Now I will prepare the Drupal CMS. Check part 2.

Headless Drupal with Gatsby.js (part 2) - setup Drupal / Headless Drupal with Gatsby.js (part 3) - make them work together

I hope you found this article interesting.

Contact us if you need help.