Decoupled Drupal 8 and Gatsby.JS: the high-speed duet
Gatsby.JS: what it is and how it works
Gatsby.JS is defined a static site generator, but it is approaching a front-end framework in its capacities. Gatsby is built on very hot front-end tools, some of which are:
- GraphQL — the super efficient query language
Gatsby.JS is meant for building blazing fast static sites. It fetches the data to them from absolutely any sources and generates static content using GraphQL. Right now, there are 500+ source plugins to establish the connection between particular data sources and Gatsby. The sources include YouTube, Twitter, Hubspot, Shopify, Trello, Vimeo, Google Sheets, content management systems like Drupal, WordPress, and so on.
Decoupled Drupal 8 and Gatsby.JS: the great duet and its benefits
One of the hottest and most beneficial combinations for today is Gatsby and Drupal 8. According to the the decoupled, or headless Drupal architecture, Drupal serves as the backend only, while Gatsby.JS handles the presentation layer.
Drupal 8 and Gatsby.JS are both open-source, have a large and active community and a huge ecosystem of add-on modules or plugins. And Drupal 8 has built-in web services to make integration a breeze.
What makes this combination so beneficial? The simplicity and speed of a static site combines perfectly with the power and flexibility of the backend provided by the Drupal 8 CMS. Here are at least some of the features that we get in the end:
- Unmatched speed. Gatsby.JS pre-fetches all pages of the website instead of querying the database every time on demand, which makes navigation enjoyable and amazingly fast. Gatsby is a static PWA (progressive web app) generator. It efficiently fetches only the critical HTML, CSS, and JS files.
- Easy setup. No cumbersome deploy and setup processes will be needed with Gatsby. It builds your site as static files that can be quickly deployed anywhere.
- Great personalization features. Drupal-and-Gatsby combinations can feature awesome user personalization and authentication capabilities.
- Awesome content editing. Usually, static site generators need writing content in Markdown, which could be cumbersome for content editors. But the problem is solved with Drupal 8 as a backend! Drupal 8 content creation features are a joy for any content editor.
If this looks appetizing enough, contact our Drupal team right now to combine decoupled Drupal 8 with Gatsby.JS for you! Or continue reading about some implementation details.
Some specifics of using Drupal 8 and Gatsby.JS
In the decoupled setup, both Drupal 8 and Gatsby sites need to be prepared to work together. They will be connected by means of the special Gatsby’s source plugin for Drupal that fetches data, including images, from Drupal 8 websites with JSON API installed.
Our next destination is Configuration — Web Services — JSON API Overwrites.
In Settings, we need to make sure the path prefix for JSON API is /jsonapi. This is what the Gatsby site will need to know.
In People — Roles — Permissions we give access to the JSON API list of resources to users with all roles, including anonymous.
Our Drupal site is ready for Gatsby integration, and we now need to prepare our Gatsby site. It begins with installing Gatsby’s CLI:
npm install --global gatsby-cli
Then we run Gatsby with the command, after which the Gatsby site should become available at localhost:8000:
The above mentioned source plugin for Drupal then needs to be installed on the Gatsby site. Next, we add the piece of code from the plugin’s documentation to the gatsby-config.js file. The URL should changed to the one of our Drupal site.
apiBase: `api`, // optional, defaults to `jsonapi`
We then configure our Gatsby site to fetch exactly the content we need from Drupal. We need to create the appropriate pages in /src/pages on the Gatsby site and add the code for React import to the JS file.
And we configure GraphQL at http://localhost:8000/___graphql to query the Drupal site exactly how we want.
It all crowns up with the last command to publish our Gatsby site with the Drupal data:
This is just a very brief description of getting Drupal 8 work with Gatsby. Our experts are ready to do the setup exactly in accordance with your wishes.
Enjoy the combination of decoupled Drupal 8 and Gatsby.JS!
If you are interested in using decoupled Drupal 8 and Gatsby.JS, either on an existing project or on a new one, contact our Drupal developers. Our Drupal 8 team has great experience in third-party integration. We will advise you the best decoupled setup and, of course, smoothly implement it. Let’s enjoy the latest and greatest technologies!