Combining Drupal and GatsbyJS for high website speed

JavaScript frameworks have raised the bar of website speed to the sky. Still, it’s just the beginning. GatsbyJS, a tool based on React and GraphQL, impresses the world with fast websites and applications it creates. Let’s take a look at combining Drupal and GatsbyJS to achieve high website speed.

What is GatsbyJS?

GatsbyJS is an open-source React-based framework for building blazing fast websites and applications. Gatsby pulls data from various sources like APIs, decoupled CMSs, databases, markdown, YAML, and more, using GraphQL. 

Gatsby is also called a static site PWA (progressive web app) generator. However, developers can go beyond static sites. Each Gatsby site is a full-fledged React application, so it’s possible to create dynamic apps with it (online stores, blog sites, user dashboards, and so on). 

Created in 2015, GatsbyJS has reached 417,700+ weekly NPM downloads and a 32,600 star rating on GitHub. The showcase of projects built with Gatsby on the official website alone includes 450+ sites.

Its latest version, Gatsby v2, has 130+ default starter kits to quickly start a Gatsby site. Gatsby also has 740+ source plugins to pull data from specific sources (including Drupal). Gatsby websites are also easy to deploy anywhere.

Gatsby and high website speed

“Building blazing fast websites” is part of the official Gatsby slogan. How fast is “blazing fast”? We performed a Google PageSpeed test for Gatsby default starter demo Netlify:

Here is the same test performed for Gatsby starter blog demo Netlify:

To achieve high website speed results, Gatsby uses:

• prefetching
• lazy-loading
• inlining critical CSS
• code splitting
• optimized Webpack configurations
• server-side-rendering
• accessible Reach router

and more.

GatsbyJS recognized by the Drupal community

Drupal, with its strong content management features, can provide a powerful data source for the fast and lightweight Gatsby frontend. So the idea of combining Drupal and Gatsby has inspired the Drupal community a lot. Decoupling Drupal 8 with Gatsby has become the topic of speeches and workshops at Drupal meetups. Among them:

Connecting Drupal and GatsbyJS

So let’s take a glimpse at how Gatsby and Drupal are connected. For combining them, we will need:

• Gatsby website
• Drupal website
• Gatsby source plugin for Drupal to connect them

1. Preparing the Gatsby website

To get a Gatsby website, we first need to make sure we have NodeJS and NPM installed. Let’s then install Gatsby command-line interface:

   npm install -g gatsby-cli

We create our new project called “drupal-gatsby”. This command will install the Gatsby default starter from Git. Then we go to its folder:

   gatsby new drupal-gatsby && cd drupal-gatsby

And we run the command to build our website on the server:

   gatsby develop

We are now able to see our Gatsby site with its default starter “astronaut” design at http://localhost:8000/. 

We will see what we have on the website. There are config files and the src folder with components (header, footer etc.), pages, and images.

The gatsby-config.js file contains the configuration, including the site’s name. Let’s change this name from “Gatsby Default Starter” to “Drupal-Gatsby website by Drudesk” in this file:

  siteMetadata: {
    title: 'Drupal-Gatsby website by Drudesk',
  },

The src/pages folder has the files for all our pages. It’s possible to create new pages right there by copying the existing page files and putting new page names into them. And then, for example, the “news” page will be available at the route “/news.”

The index.js file is where we can change the greeting phrases on the main page. The changes apply instantly, without page reload. 

The “Gatsby develop” command is always active in the terminal and it rebuilds the page in real time after all our changes. So reactive — this is JavaScript, after all!

By visiting http://localhost:8000/___graphql, we see GraphiQL, an in-browser GraphQL IDE to manage our website’s queries. The left side is for queries, the right one is for responses from the server. The “play” button will run the queries. 

The ctrl+space keys offer autocomplete options for queries. It works when we open a curly brace. Let’s choose:

{
allSitePage
}

And we see that GraphiQL returns the results for all site pages:

2. Preparing the Drupal website

OK, the Gatsby site is ready, so it’s time to pull Drupal website data. On our Drupal site, we install and enable the JSON API module, which will instantly prepare our API endpoints. As of Drupal 8.7, JSON:API will be included into Drupal core, so there will be no need to install it.

The JSON API Extras module will give us a UI for exact settings. The permissions for JSON:API need to be enabled for anonymous user on our Drupal website.

3. Pulling data from Drupal to Gatsby

For connecting both Gatsby and Drupal together, there is a Gatsby source plugin for Drupal. Let’s install it in our Gatsby site’s root directory.

   npm install --save gatsby-source-drupal

It’s time to tell Gatsby from where to pull data from. In its config.js file, we need to add one more plugin as a code snippet. We include the Drupal source plugin, our Drupal website URL, and JSON:API as apiBase in it. 

{
  resolve: `gatsby-source-drupal`,
  options: {
    baseUrl: `http://*our-drupal-website*`,
   apiBase: 'jsonapi',
  },
},

And we run this magic command again:

   gatsby develop

We will now see in the terminal that Gatsby is “starting to pull data from Drupal.” When we are informed of the successful compilation, we can come back to GraphiQL and see it has many more options for autocomplete. They now include Drupal data.

We query “allNodeArticle” and specify it to show the node title. We see that Gatsby responds with the article titles from our Drupal site. Gatsby has successfully fetched data from Drupal!

We can expand and shape our queries to display absolutely anything we like. And we can build whatever Gatsby pages with Drupal data in the src/pages folder by inserting our GraphQL queries into the page files. Finally, the “Gatsby build” command will publish our site.

Assistance with your Drupal and Gatsby setup

This has been just a Drupal-Gatsby sketch, but Gatsby’s settings and opportunities are endless. You can always rely on our Drupal team in any tasks related to your Drupal and Gatsby setup. We will help you in the configuration or create the entire setup from scratch. 

Enjoy high website speed with the latest JavaScript technologies and Drupal!