Gatsby & Drupal: In Quest of an Ideal Coupling

In the virtual booth of Drupalcon Europe 2020

It's an established fact that with GatsbyJS we need just a few minutes to spin up an Internet-scale site with Drupal as the data source on the back end. There have been more than enough glitzy presentations to demonstrate that. This talk will focus on the difficult questions: how well does the pair Drupal + GatsbyJS fare on the way towards larger sites, how can we employ Drupal to be more than just as a source of data, and in which cases it's still better to stick to the feature-full, established monolithic Drupal setup.

GatsbyJS is a modern open source JavaScript framework based on ReactJS, Webpack, JavaScript and CSS that allows developers quickly build very performant static websites and apps.

Over the past few years it has been very popular in the Drupal world as well. It literally takes mere minutes to spin up a slick and blazing fast decoupled site based on a few Markdown files, and does not take much more effort to connect it to Drupal 9 backend through its excellent JSON API. This quick process is certainly awe-inspiring and has been rightfully featured in many a Drupalcon session, often live. In the meanwhile it's a well-accepted reality that any of us can build an Internet-scale and secure with amazingly little effort.

What's less explored is the road from a little personal or small-business site to a more complex company or enterprise web presence. Yes, it's still reasonably easy to add other data sources, images and other media, take care of analytics and do a proper SEO tuning. But venturing still beyond to authentication for selected content, previews, dealing with drafts, permissions, build time optimalization, etc., while perfectly possible, often requires serious effort. Iterating towards some of the more complex web applications we sometimes find ourselves wondering as to why did we not realize those requirements with Drupal, easily with just a few of its popular modules.

This presentation will try to shed some light into this chasm on the path from the slick little sites to complex web applications, and learn from it. We will probe how far is it practical to team up with GatsbyJS, and at what point we should consider sticking with good old Drupal to save us from madness. Using existing or planned features we shall prove that leveraging Drupal functionality on the back-end we can build even many of the rather complex sites using GatsbyJS on the front-end.

It is sometimes considered a disadvantage of Drupal that it does not focus purely on being a CMS back-end for decoupled sites. We will show it's also its strength though. Thanks to functionality that can easily be added to Drupal thanks to its immense ecosystem of modules — and thanks to its excellent API — can Drupal become much an unparalleled data source for a decoupled front-end app like GatsbyJS. While showing what all can Drupal provide to realize more complex sites in Gatsby we will also map situations where we still better use the full Drupal 8 or another decoupled solution.

Slides^#

My presentation of the Drupalcon Europe 2020 session Drupal & Gatsby: Striving for Parity on Tuesday, December 8, 2020.

Gatsby^#

https://www.netlify.com/jamstack/

https://github.com/gatsbyjs/gatsby

https://www.gatsbyjs.com/docs/quick-start/

https://www.gatsbyjs.com/docs/content-and-data/

https://www.gatsbyjs.com/plugins
https://www.gatsbyjs.com/starters
https://www.gatsbyjs.com/blog/2020-04-22-announcing-incremental-builds/

https://www.gatsbyjs.com/plugins/gatsby-plugin-next-seo/

https://auth0.com/blog/securing-gatsby-with-auth0/

https://www.gatsbyjs.com/docs/adding-search-with-algolia/

https://www.gatsbyjs.com/docs/deploying-and-hosting/
https://www.netlify.com/products/
https://www.netlify.com/blog/2020/04/23/enable-gatsby-incremental-builds-on-netlify/
https://github.com/chrisdwheatley/netlify-plugin-image-optim
https://www.gatsbyjs.com/cloud/

Sourcing from Drupal^#

https://www.gatsbyjs.com/docs/sourcing-from-drupal/

https://www.gatsbyjs.com/docs/recipes/querying-data/
https://www.gatsbyjs.com/docs/running-queries-with-graphiql/

https://www.gatsbyjs.com/features/cms/gatsby-vs-drupal
https://www.gatsbyjs.com/blog/tags/drupal/
https://www.gatsbyjs.com/use-cases/drupal/

https://www.drupal.org/project/jsonapi
https://www.drupal.org/project/gatsby

<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allow="encrypted-media" allowfullscreen="" scrolling="no" src="https://speakerdeck.com/player/791bff16ddc341d1b80c82998226712a" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"></iframe></div>

Tomáš Fülöpp

Sint-Agatha-Berchem, Belgium

December 8, 2020

Parents

Siblings

Socials

https://twitter.com/vacilandois/status/1336338593124548609

Gatsby & Drupal: In Quest of an Ideal Coupling

Slides#

Gatsby#

Sourcing from Drupal#

Slides^#

Gatsby^#

Sourcing from Drupal^#