In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

How to Get Gatsby to Work with Drupal: Building a Gatsby Site with a Decoupled Drupal Back-End

How to Get Gatsby to Work with Drupal: Building a Gatsby Site with a Decoupled Drupal Back-End

by RADU SIMILEANU on Aug 13 2018

Just imagine: putting together the powerful UI creation tools of a static site generator — more of a modern front-end framework rather —  built for high speed, like Gatsby.js, with Drupal 8's content modeling and access system! Putting their powers together into a blazing-fast website! But how to get Gatsby to work with Drupal?

How do you build a plugin that fetches data from API-first Drupal? In short: a static, conveniently simple, yet robust Gatsby site powered by a powerful, decoupled Drupal back-end?

You've got the questions, we've got the answers...

And we've grouped all our answers to your questions regarding “API-first and decoupled Drupal in connection with Gatsby” in a straightforward 4-step tutorial. One on building a high-speed Gatsby website backed by a versatile headless Drupal CMS.

Shall we dig in?

 

1. But What Is Gatsby.js More Precisely?

The standard, rather rigid definition would be:

“It is a GraphQL-fueled, React-based static site generator.”

Now if the words “static site generator” just make you... cringe, here's a more nuanced definition for you:

“Gatsby's more of a modern front-end framework —  one pulling together the best parts of GraphQL, React, webpack, react-router — built with the developer experience in mind.”

In short: it's a static site that this “more than just a static site generator” helps you build, leveraging its out-of-the-box front-end tools. A website geared to reach fast page loads while pulling data from a decoupled Drupal CMS.

And there are 2 basic steps for getting started with Gatsby. You simply write your site's code structure and let Gatsby handle the rest:

 

  1. turn it into a directory with a single HTML file
  2. … along with all your static assets

2. 3 Reasons Why You'd Want to Use Gatsby

… instead of Jekyll, your webpack config or create-react-app.

 

a. Because of the richness of the Gatsby ecosystem

With rich documentation at hand and backed by an already large community of starters, you'll get your Gatsby site up and running in no time.

 

b. Because it leverages GraphQL' power to build its data layer.

And this is one of those heavy-weighting reasons for using Gatsby over other competing alternatives:

Gatbsy's built to fetch data from... pretty much anywhere — your CMS of choice, Markdown, third-party APIs, Markdown — using “source” plugins. When creating its data layer, it relies on GraphQL, which builds an internal server of all this pulled data.

In short: when questioning yourself “how to get Gatsby to work with Drupal”, do keep in mind that in your future Gatsby & decoupled Drupal setup data gets queried from the same place, in the same way, via GraphQL.

 

c. Because it's built for high speed.

And this is one of Gatsby's hardest-to-resist-to advantage:

It's just... fast.

And that gets reflected in your final Gatsby & decoupled Drupal site while bubbling up to the user experience, as well.

Summing up, these are the 3 strongest reasons why you would be tempted to use Gatsby with Drupal CMS. 

I'm not going to engage in dynamic sites vs static sites debate now. The internet's already overcrowded with such comparisons.

I'll just end this “pledge” on using Gatsby with a non-debatable statement:

Since a static site generator pre-generates the pages of your website, scales of performance vs maintenance costs gets unbalanced. And guess which one's going up and which one down!

 

3. And Why Would Pair Gatsby with Drupal?

If there are strong reasons why you should be getting started with Gatsby, why is there any need to consider decoupled Drupal CMS for its back-end?

Because static site generators don't “care” much for the authoring experience. Content editors have to get themselves tangled up in Markdown for creating content.

True story!

And this is where powerful CMSs, such as Drupal, step in, “luring” you with their:

  • WYSIWYG editors
  • content types 
  • content modeling capabilities
  • access workflow capabilities

… to make your content team's lives easier!

And now your “How to get Gatsby to work with Drupal” dilemma turns into a new legitimate one:

How to make your Gatsby website cope with a decoupled Drupal setup without adding the “dread” of a database and web server to the equation? 2 elements that “pave the path” for performance and security issues...

Well, this is precisely what this “decoupling Drupal with Gatsby scenario means to avoid:

  • you'll get to host your Drupal CMS in-house
  • … and thus take full advantage of the robustness and versatility of a decoupled Drupal CMS back-end
  • your Gatsby website will fetch data from its Drupal back-end and generate content “the static way” (which translates into “incredibility fast page loads”)

     

4. How to Get Gatsby to Work with Drupal More Precisely

Or simply put: how to pull data/content from Drupal into your Gatsby website?

Here's a straightforward tutorial in 4 steps on how to integrate Drupal with Gatsby:

 

4.1. First, Build Your Drupal Server 

Assuming that you have a Drupal 8 website installed, the very first step to take is to:

 

a. Create a new content type 

For this exercise, it's a blog — including all its blog posts — that we'll try to transfer from Drupal to Gatsby. So, we'll name our content type: “Blog”.

It will include 3 basic fields:

  • title
  • body
  • image

Just navigate to Home>Administration>Structure>Content Types.

 

b. Turn Drupal into an API Server 

And there are 2 key modules that you'll need to install:

 

  1. jsonapi_extras: for gaining more control over the API (to disable resources, to change the default endpoint, to enhance field output etc.)
  2.  jsonapi, which will turn your Drupal website into an API server (one having a default endpoint)

     

c. Grant Anonymous User Permission to Access the JSON API resource list

If you overlook this step, you'll end up with an “Error 406” message, which will just sabotage your whole “decoupling Drupal with Gatsby” mission.

 

d. Check How Your Drupal API Server Works 

You can do this by navigating to http://[your-site]/jsonapi logged in as an Anonymous user.

If the page that you'll get displays all the information regarding your API server, then you'll know you're on the right track.

 

4.2. Then, Create a New Gatsby Site

But before you jump to building your new static website, check whether you have npm and node installed on your PC. 

How? By entering “npm  -v” and “node  -v” into your terminal.

Next, you'll need to install Gatsby's CLI:

 

npm install --global gatsby-cli

Then, just build and get your Gatsby site up and running.

Note: by default, it will be accessible at localhost:8000.

How to Get Gatsby to Work with Drupal: building a new Gatsby site

4.3. Decouple Drupal with Gatsby: Pulling Data from the API Server

 

a. Set up the (/blog) page

Solving your “How to get Gatsby to work with Drupal”  type of dilemma starts with... the creation of a new page on your Gatsby website.

And is as simple as... setting up a new JS file.

Note: all your Gatsby pages will get stored under /src/pages.

Now here are the basic steps to take:

 

  1. create the blog.js in /src/pages
  2. then add this code: import React from "react" const BlogPage = () => ( <div> <h1>Latest from our bog</h1> </div> ) export default BlogPage 

     

Voila! You've just created a new page at /blog.

 

b. Pull Content from the Drupal 8 site using GraphQL

The “gatsby-source-drupal” plugin, to be more specific.

It's this source plugin that will be “in charge” with all the data (images here included) pulling from decoupled Drupal back-end and pushing into your Gatsby site.

Note: do keep in mind that, in this case, the JSON API module plays a crucial role.

And here's how you install your “power” plugin:

 

// in your blog.gatsby folder npm install --save gatsby-source-drupal 

Next, just configure your newly installed plugin:

 

// In gatsby-config.js plugins: [ ... { resolve: 'gatsby-source-drupal', options: { baseUrl: 'https://goo.gl/Cc5Jd3 apiBase: 'jsonapi', // endpoint of Drupal server }, } ], 

Tada! Now your site should be functioning properly.

If... not quite, here are the causes of the 2 most common error messages that you could get:

 

  • “405 error”, check whether the jsonapi_extras module is enabled
  • “ 406 error”, have a closer look at the permission on your Drupal site

     

c. Configure GraphQL to Pull Specific Pieces of Content from Drupal

In other words: to query all the “blog” nodes from Drupal and request specific data from the API server.

Another strong reason for using Drupal CMS with Gatsby is that the latter provides an in-browser tool for testing GraphQL queries names, for writing and validating them. You can access it at localhost:[port]/___graphql, whereas in our particular case here at: localhost:8000/___graphql.

Now, as you're solving this “How to get Gatsby to work with Drupal” type of puzzle, just try to query all the blog nodes.

Next, navigate back to your blog.js file and run this query:

 

export const query = graphql` query allNodeBlog { allNodeBlog { edges { node { id title body { value format processed summary } } } } } ` 

Then, update your const BlogPage so that it should display the body, content, and title:

const BlogPage = ({data}) => ( <div> <h1>Latest from our blog</h1> { data.allNodeBlog.edges.map(({ node }) => ( <div> <h3>{ node.title }</h3> <div dangerouslySetInnerHTML={{ __html: node.body.value }} /> </div> ))} </div> ) 

Next, save your file and... “jump for joy” at the sight of the result:

All your blog posts, nicely displayed, pulled from Drupal and published on your Gatsby site!

 

4.4. Finally, Just Go Ahead and Publish Your New Gatsby Site

And here you are now, ready to carry out the last task of your “How to get Gatsby to work with Drupal” kind of “mission”. 

This final task is no more than a command that will get your Gatsby website running:

gatsby build 

Next, just run through your /public folder to see the “fruits of your work”.

At this point, all there's left for you to do is to copy/push content in /public to the server and... deploy your new website using Gatsby with Drupal CMS.

The END! This is how you do it: how you use Gatsby.js in a decoupled Drupal setup so you can benefit both from:

  1. a modern static site generator's robustness and high performance, built with developer experience in mind 
  2. a powerful CMS's content managing capabilities, built with the editorial experience in mind 
Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

5 Steps to Migrate Your Drupal Website to Another Host
  At some point in their business journey, every website owner can encounter the need to migrate their web host. As more lucrative hosting options are making their way in the industry–VPS, shared, or dedicated hosting—it's no surprise that many website managers choose to perform host migration.  This article provides support in handling one of the most popular DevOps services, hosting server migration, by outlining five essential steps that help you complete a successful migration.   When is the time to move your Drupal website to a new hosting server? The decision to switch web hosts is not an easy one to take. The good news is that there are multiple signs that can make it clear that your website requires hosting updates if you know where to look. It won't be comfortable to acknowledge them, but as soon as you start on this journey, you are transforming your website for the better.  Let's have a look at how you can spot these signs on your Drupal website.  Downtime has become a recurrent issue.  Your customers demand availability and speed, so every time your website is down and unavailable for users, you risk building a bad reputation of unreliable and low-quality services. Your server can impact your site's availability if your hosting equipment’s quality is low or your host's security features and plugins provide poor protection capabilities, as cyber-attacks can often lead to downtime.  Your host is hard to reach. As a website owner, you want to ensure that the communication with your web host is fast and streamlined. There may be times when your server crashes or you a server error, and you need to get in touch with your host as soon as possible to provide troubleshooting guidance and get your site up and running.  An unreliable host may not only affect the functionality of your website but can also cost you customers. Getting the support you need when it comes to your hosting account is paramount to provide high-quality user experiences. That's why making sure that you have a solid customer service team at your side at any time is good for the business. Your current host costs you too much. Web hosting can sometimes be the most significant investment when running a website. It's a recurring expense, so you want to ensure that you choose the best option. However, expensive web hosts aren't always necessary. You have to figure out if the features and the amount of server space that your host provides are a good fit for your site. You don't need to break the bank for hosting servers that don't serve your current needs. You can always review your needs and upgrade to a more expensive plan. You don't get the security you need. As far as investments are concerned, paying extra for a secure web host is worth it. A host that takes security seriously will bring significant benefits to your website.  By investing in a secure hosting server, you'll avoid losing data and parts of your website, having user data compromised, and losing credibility in front of your audience.  When choosing your web host, watch out for features and plugins like Secure Sockets Layer certificates, malware scanning, or server firewalls.    How to switch to a new hosting provider Migrating your Drupal site to a new host is a process that involves contacting your current host, performing database backups, connecting to a new server, and uploading your files. It's not uncommon for issues like corrupted backups to appear during the migration process. Consider this when planning your migration, and think if you can save some resources by hiring a professional agency like Optasy to complete this process for you.  There are a few essential steps to follow when migrating to another web hosting server. Let's explore some of them.   1. Turn Drupal caching off. This is the first step to take in order to avoid potential disruptions. Go to your Drupal admin dashboard and: Click Configuration - Performance - Caching - Select "No Caching.” Uncheck "Aggregate CSS files" and "Aggregate JavaScript files" in "bandwidth optimization" and click "Clear all caches.”   2. Backup your Drupal files. Connect to your remote server - Enter the connection details - Hit "QuickConnect" and connect to the remote server that hosts your website.  In your main site's folder, download the content on your local device, and you've done backing up your Drupal files.   3. Export your Drupal database. Go to the phpMyAdmin on your server's control panel in the Database section.  Click "Check all" on your Drupal site database, then "Export method and the SQL.”   4. Migrate your Drupal database to the new host. Create a new MySQL database on your target server. Click "Import" at the top of your database, then "Choose File,” and press "Go.” You've now restored your site on the new hosting from the backup.   5. Turn on Drupal caching. Go to Configuration - Performance - Enable Drupal caching. Kudos to you! You've officially migrated your Drupal site to another host.    Conclusion Building and managing a Drupal website is a complex process, and hosting is one element that can be pretty challenging to handle. There are plenty of hosting options available on the market, and you might find it difficult to decide which one is the best fit for your website needs.  If you're considering server migration or just need some professional advice on how to handle your hosting server successfully, our team of Drupal experts at Optasy is glad to help.    Photo credit: bsdrouin on Pixabay.     ... Read more
Raluca Olariu / Apr 12'2021
Drupal Commerce vs. Magento - Who Wins the Battle for eCommerce?
  In 2021, it is expected that about 27.2% of the world population will shop online at least once.  A lot of potential customers out there, right? As eCommerce is becoming the new norm, digital businesses seek out ways to thrive in this competitive landscape and position themselves as leading trend-setters.  To do that, companies need to realize the power of digital transformation and how they can embrace it in order to support the modern demands of speed and accessibility that customers require today.  This starts with leveraging the right tools for building robust digital assets. One of these tools is represented by eCommerce platforms, which are getting increasingly popular for businesses that seek to deploy an eCommerce system.  Drupal Commerce and Magento are two of the leading eCommerce solutions on the market and are often seen as direct competitors in the industry.  This article provides a side-by-side comparison of these two platforms in regards to technical capabilities, development, costs, scalability, security, and mobile responsiveness. Hopefully, this information will help you narrow down your choice in order to ensure that you choose the best fit for your business needs.    Key eCommerce Capabilities Enabled by Drupal and Magento Drupal Commerce was released in 2011 and offers an open-source application framework that supports retailers in building and managing inventory, track orders, or handle payments.  Magento's initial release was in 2008. This PHP-based eCommerce site provides high levels of PayPal protocol integration and supports 12 worldwide payment gateways.  Both platforms offer, through native features or third-party add-ons, the following benefits: Intuitive, easy-to-use user interface and control panels. No technical knowledge is required to customize and edit basic features. Full-featured CMS that supports social sharing. Business-centric structure for online stores. Native integration of inventory-driven advertising material Integration capabilities with third-party analytics, invoicing, or quoting solutions One thing to keep in mind is that neither of these eCommerce platforms is a "plug and play" solution and making the most out of their potential may require further expertise.    Headless eCommerce The headless version of Drupal Commerce has been in the spotlight in the last few years. This new initiative is an eCommerce solution that stores and delivers content without a front-end delivery layer. It's an API-driven implementation that transforms eCommerce functionality, making it available across a wide range of potential host environments.  A headless eCommerce model inclines towards a more SaaS-oriented, platform-agnostic solution that allows for better employee adoption and considerable time savings across IT departments.  When it comes to Magento, the open-source eCommerce platform, headless eCommerce is equally prioritized. Both Drupal Commerce and Magento are supporting headless models as the future of eCommerce.    Pricing Drupal eCommerce's technical cost of entry is free. However, depending on scope and scale, the costs of developing and maintaining performant and secure eCommerce servers might reach tens of thousands of dollars.  Drupal Commerce project costs are directly proportional with a business needs for specific development architecture, module integrations, custom theme styling, or particular feature integrations.  Magento's newer modules are not offered as open-source and upgrading from Magento Open Source to Magento Commerce might be challenging.  From this financial point of view, Drupal Commerce seems to be a clear winner.    Scalability Drupal Commerce has relevant capabilities of staying highly performant at scale. However, this CMS platform does not provide out-of-the-box database sharding and it can only be implemented on a third-party basis.  Drupal Commerce has lower requirements than Magento Commerce when it comes to the web server—the minimum required RAM for PHP is 64 MB and production systems usually require 128 or 256 MB.  Drupal Commerce-based implementation splits the eCommerce experience across three related Drupal domains. As a result, scaling is better, bottlenecks are eliminated, and the content and purchasing experiences are efficiently separated.  On the other hand, Magento's cloud hosting solves a large number of scalability issues, although at a higher price. The minimum RAM requirement of 2 GB will probably not scale well and distributed networks or caching may need to be deployed with greater care to keep up with the heavy load.    Security Drupal is proven to be the most secure CMS and Magento's infection rate is much higher than Drupal's. From the point of view of security, Drupal Commerce is a winner for businesses that want to prioritize secure platforms.  Source: Sucuri.net   Mobile Responsiveness As most websites transition to a mobile-first approach, eCommerce platforms that prioritize mobile responsiveness are a must.  Fortunately, both Magento Commerce and Drupal Commerce provide robust mobile capabilities to satisfy the need for accessibility and performance.  Drupal Commerce's themes allow building a fully responsive design for eCommerce websites and offer screen flexibility for creating versatile experiences. The most popular themes like Corolla or eStore provide: Multi-level responsive header menus Custom layouts and color options Box shadow and background textures Custom field additions Magento Commerce is close to Drupal when it comes to mobile optimization capabilities. Its responsive web design features help users create optimal viewing experiences for multiple devices. Magento Blank or Luma are out-of-the-box themes that deliver a fully responsive design.   Who's the winner for eCommerce? While both Drupal Commerce and Magento Commerce are reliable options for a digital company that wants to thrive in the eCommerce market, every business has its own unique needs and requirements. Choosing the software that best supports these needs is a process that involves a lot of research and planning.  If you want to speed up this process and ensure that you reach the right decision, don't hesitate to contact Optasy for professional advice and support.  Discover which platform is most suited to provide a robust eCommerce experience for you and your customers.  Photo credit: Mark Konig on Unsplash.   ... Read more
Raluca Olariu / Apr 06'2021
Drupal DevOps Best Practices for 2021
  Today, businesses interact with their customers in many forms of digital services on all kinds of devices. As the digital world is more and more present in our lives, delivering streamlined experiences at the tip of your customers' fingers is the key to success.  A vital role in delivering rapid, accessible IT services is played by DevOps, a set of practices that brings software development and IT operations together. And when it comes to Drupal web development, DevOps represents a valuable instrument that can maximize the potential of Drupal-delivered projects.    How does DevOps work and what benefits does a DevOps model deliver? DevOps, the culture that encompasses most digital businesses today, uses automation and advanced tech stacks to add a new layer of velocity to a company's infrastructure. “DevOps represents a change in IT culture, focusing on rapid IT service delivery through the adoption of agile, lean practices in the context of a system-oriented approach. DevOps emphasizes people (and culture) and seeks to improve collaboration between operations and development teams. DevOps implementations utilize technology — especially automation tools that can leverage an increasingly programmable and dynamic infrastructure from a life cycle perspective”. - Gartner, Inc. Businesses that incorporate a DevOps model into their workflows see benefits like:   Scalability. Fundamental processes like infrastructure and development are operated at scale, which allows for a more efficient approach to developing, testing, and producing environments in a repeatable and streamlined way. Faster and more reliable delivery. The modern customer's need for speed is real, and DevOps can support organizations in their quest to speeding up feature releases, bug fixes, and other types of upgrades. Continuous integration and delivery are two critical practices that can automate the release process. High velocity. Adopting an efficient DevOps model allows professionals to build digital innovations faster and keep up with the trends imposed by ever-changing markets. Security. When adopting DevOps, you don't have to compromise on safety as DevOps models provide automated compliance policies and configuration management mechanisms.   DevOps best practices To make the most out of DevOps, there are some key practices to follow when implementing your model:   Leverage microservices architecture, which allows breaking down large systems into more specific, independent projects. As a result, developers and architects have more flexibility over managing these projects, and applications are more pliable and allow faster innovation. Install minor updates on a regular basis to solve issues and fix bugs quicker. The DevOps model aids companies in deploying updates more often and constantly optimizing their ongoing processes. Use continuous integration and continuous delivery to overcome operational challenges in complex development workflows.  Don't forget about infrastructure as a code, as automating your infrastructure provides better computing resources and higher responsiveness to possible alterations.    DevOps for Drupal development Implementing a DevOps model into your Drupal development workflow will not only accelerate your development cycle and delivery but will also contribute to better user experiences and business outcomes.  As more companies are adopting DevOps models (according to a recent report, 60% of businesses are using or are considering DevOps for their organization), it is expected that DevOps will gradually become even more essential for any digital business. With this growth will come better opportunities for building future-ready Drupal deployments and web experiences suited for the modern customer’s complex needs.    Wrapping Up DevOps continues to grow in new industries, opening possibilities for enhancing security, product monitoring, development, and cluster computing. As it will become the new norm, DevOps will continue to integrate more departments, improve solutions and designs.  As we've seen, DevOps models can also support a Drupal development team that focuses on improving project timelines and delivery. Optasy is the right partner for fostering digital innovation and can help you create customized Drupal digital experiences.  What do you need support with?  Photo credit: PCB-Tech on Pixabay.   ... Read more
Raluca Olariu / Apr 02'2021