Combining Drupal and GatsbyJS for high website speed
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).
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:
To achieve high website speed results, Gatsby uses:
- inlining critical CSS
- code splitting
- optimized Webpack configurations
- accessible Reach router
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:
- “Gatsby & Drupal” planned for DrupalCon Seattle 2019
- “Drupal and Gatsby, the great workflow” workshop at Drupal Mountain Camp 2019 (which Drudesk also visited)
- “Decoupling Drupal with Gatsby” at Montreal Drupal meetup 2019
- “Introduction To Decoupled Drupal 8 + Gatsbyjs + React” at BadCamp 2018
- “Gatsby JS: A Powerful Front End Tool for Decoupled Devs” at Drupal Camp Asheville 2018
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:
We are now able to see our Gatsby site with its default starter “astronaut” design at //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:
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.
By visiting 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:
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.
And we run this magic command again:
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.