Live Preview with Gatsby and Drupal

Live Preview with Gatsby and Drupal Decoupled Days – July 18, 2019

Name: Shane Thomas Relevance: Developer at Third & Grove What else: • I created CodeKarate.com with hundreds of Drupal videos Who Am I… and why should you care? • I am the maintainer of the Gatsby Drupal module Twitter Handle: @smthomas3 Additional Skills: • Unknown 2

Founded 2014 50 People 16 100+ US states Happy clients 800+ Open Source contributions

What are we talking about today? 1. Introductions 2. Gatsby / Drupal Overview 3. Live Demo #1 - Live Preview 4. Live Demo #2 - Live Preview Setup 5. The Future

Getting a read on the room

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps — Gatsbyjs.org

The Problem

No easy way to see what something is going to look like before you click save So what’s the big deal? Current Options: • Run a Gatsby development server to view the content before deploying to your live site. This requires the entire site to be regenerated. • Deploy and hope for the best… 8

Let’s live a little dangerously Time for a Live Demo

Demo #1 - Live Preview

*Backup Video in case the second live demo goes horribly wrong

Demo #2 - Live Preview Setup

Initial Setup - Install Gatsby 2. gatsby new [project-name] cd into the new directory 3 npm install —save gatsby-source-drupal OR yarn add gatsby-source-drupal

*Backup Video in case the second live demo goes horribly wrong

*Backup Video in case the second live demo goes horribly wrong

*Backup Video in case the second live demo goes horribly wrong

Some Caveats

– So what is the future of Live Preview?

Integration with Drupal’s Content Moderation system

Keystroke Preview

Gatsby Incremental Builds

Gatsby Drupal Preview Checklist: 1.Gatsby Site with Gatsby Source Drupal Plugin Let’s Recap! 2.Drupal 8 site with Gatsby module installed and configured 3.Gatsby cloud instance (or local dev instance running gatsby develop) 4.Configure gatsby-config.js to point to your Drupal site 5.Write graphql in gatsby-node.js to pull in your entities 6.Create a Gatsby template for an entity 7.Commit/push your code to Github (if using Gatsby Cloud) 8.Profit! 22

Interested in helping out? 23 • Test out Live Preview and report any issues • Join the Drupal Slack discussion in the #gatsby or #contenta channel

Resources Drupal Module: https://www.drupal.org/project/gatsby Gatsby Source Drupal Documentation: https://www.gatsbyjs.org/packages/gatsby-source-drupal/ Gatsby Cloud: https://www.gatsbyjs.com/ Gatsby Demo Repo: https://github.com/smthomas/decoupled-demo My Twitter: @smthomas3 Grant’s Twitter: @grantglidewell

Thanks! shane@thirdandgrove.com Twitter: @smthomas3

Questions?