Our team loves exploring and using hot trends in development, one of which is decoupled Drupal architecture. Our previous post was devoted to using decoupled Drupal with JSON.API, and our today’s story hero will be “the Great Gatsby”. Does it sound like the famous book hero? No, Gatsby.JS is a new and hot JavaScript tool, but it promises to be equally famous and deserve a hundred books! In this post, we will discuss its principle of work and the benefits of using decoupled Drupal 8 and Gatsby.JS. And, of course, you always can rely on our Drupal experts in implementing it all.
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:
- React.JS — the amazingly popular JavaScript library for building complex interfaces
- GraphQL — the super efficient query language
- Webpack — the great JavaScript module bundler
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 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.
One of the examples of using decoupled Drupal 8 and Gatsby.JS is the demo site Umami Food Magazine. The site is built on headless Drupal distribution Contenta CMS with Gatsby.JS.
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.
So it is necessary to install and enable the JSON API and JSON API extras contributed Drupal modules, as well as enable the core Serialization module on our Drupal website.
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 follow all the site creation steps in the “Get started” documentation. Gatsby also offers pre-configured starters for site creation.
Then we run Gatsby with the command, after which the Gatsby site should become available at localhost:8000:
gatsby develop
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 be changed to the one of our Drupal site.
plugins: [
{
resolve: `gatsby-source-drupal`,
options: {
baseUrl: `https://our-site-name.com/`,
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 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:
gatsby build
This is just a very brief description of getting Drupal 8 to 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. With Drupal as a headless CMS, you can achieve seamless integration and a powerful, dynamic website.
