DrupalCon Amsterdam 2019: Live preview with Gatsby and decoupled Drupal

Room: Auditorium
Presenter: Preston So, Matt Davis
Description: Gatsby and Drupal fit together like peas in a pod, thanks to Gatsby’s first-class support for consuming Drupal data and Drupal’s improving API-first support. Gatsby, a web compiler for blazing fast websites and applications, is capable of building highly performant web experiences off the shelf, enriched even more by the administrative power of Drupal.

Nonetheless, though Drupal and Gatsby get along like a house on fire for developers, the same is not necessarily true for content editors and marketing teams that need high-fidelity content preview irrespective of the coupled or decoupled architecture underpinning websites. Moreover, editorial teams these days are not necessarily satisfied with even Drupal’s own preview capabilities, which lack real-time updates.

Projects involving Drupal and Gatsby tend to run into several major issues:

- The project requires running a local copy of the Gatsby development server and it needs to be restarted anytime an entity is changed on the Drupal website
- The project deploys changes when entities are updated or saved but this requires a complete rebuild of the site without knowing how the page will look when it goes live

Third & Grove architects and developers have been collaborating with the core Gatsby team and contributors to improve this content editing experience by introducing live preview capabilities to Gatsby sites consuming Drupal. This live preview experience means that a content editor can edit a Drupal entity and immediately see what it will look like on the Gatsby site before it gets deployed to production.

Here’s what we’ll cover:

- The history of CMS preview: What’s different today
- Why decoupled CMS preview is so challenging
- What is Gatsby? Why Gatsby?
- Decoupling Drupal with a Gatsby front end
- Introducing a content sync API to Drupal
- Challenges and insights during implementation
- Live demo: Live preview with Drupal and Gatsby

This session is geared toward developers, site builders, and content editors considering building a Gatsby site consuming Drupal. It’s also for those that have a Gatsby site in production consuming Drupal but are looking to improve the experience for content editors. But this session will also have something for anyone interested in decoupled CMS issues such as preview, editorial features, and JavaScript approaches.

Attendees will leave the session with strategies to improve the content editing process as well as knowledge on how to implement live preview on your Gatsby/Drupal architectures.

Drupal is a registered trademark of Dries Buytaert.