Live Preview with Gatsby and Drupal

A presentation at Decoupled Days in July 2019 in New York, NY, USA by Shane Thomas

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

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

Slide 5

Slide 5

Getting a read on the room

Slide 6

Slide 6

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

Slide 7

Slide 7

The Problem

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

Demo #1 - Live Preview

Slide 11

Slide 11

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

Slide 12

Slide 12

Demo #2 - Live Preview Setup

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

Some Caveats

Slide 18

Slide 18

– So what is the future of Live Preview?

Slide 19

Slide 19

Integration with Drupal’s Content Moderation system

Slide 20

Slide 20

Keystroke Preview

Slide 21

Slide 21

Gatsby Incremental Builds

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

Thanks! shane@thirdandgrove.com Twitter: @smthomas3

Slide 26

Slide 26

Questions?