Gatsby & Drupal Sitting in a Tree

Gatsby and Drupal Sitting in a Tree Drupal Camp Atlanta – September 13, 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 - Gatsby / Drupal 4. Live Demo #2 - Live Preview 5. Live Demo #3 - Live Preview Setup 6. 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

ReactJS is a JavaScript library for building user interfaces — ReactJS.org

GraphQL is a query language for your API — GraphQL.org

The Common Misperception

“Gatsby is really great for static websites, but it won’t really work for my site” — Random Developer I met on the street

Anything you can build in React, you can build in Gatsby. In fact, I would recommend just replacing Create React App, with Gatsby and starting from there. Gatsby is a framework for building progressive web applications Benefits of Using Gatsby: • Build static sites and progressive web applications • Provides sensible default configuration with the ability to override what you need • Performance optimizations around image processing and intersection observer page loading • Expansive ecosystem (if you like Drupal modules, you will like Gatsby plugins/ themes) • Unified GraphQL Data layer (bring your own content and APIs) 11

…but isn’t my current CMS good enough?

Okay… you convinced me, but what do I need to know to get started?

Install the JSON:API Module…. Step 1: Set up your Drupal 8 Site Yep, that’s it! 14

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

Step 3: Configure Gatsby to pull data from Drupal 16 • gatsby-config.js - Configure your Gatsby site to pull content from your Drupal site • gatsby-node.js - Runs at build time to turn your Drupal nodes into Gatsby pages • Graphql - Used to query data from your Drupal site • React components - create React components to display your content

Before we look at the code… write this down: CodeKarate.com

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

Demo #1 - Drupal & Gatsby Setup

The Problem

Demo #2 - Live Preview

*Backup Video in case the live demo goes horribly wrong

Demo 3 - Live Preview Setup

*Backup Video in case the live demo goes horribly wrong

*Backup Video in case the live demo goes horribly wrong

*Backup Video in case the live demo goes horribly wrong

– So what is the future of Live Preview?

A More Integrated Editing Experience

Integration with Drupal’s Content Moderation system

Keystroke Preview

Let’s Recap!

1. Gatsby is not just for your static sites! 2. The gatsby-source-drupal plugin allows you to pull content from your Drupal 8 website 3. GraphQL allows you to query your Drupal data 4. Display your pages with React components 33

Interested in helping out? 34 • 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/gatsby-preview Code Karate Website (for Gatsby Videos): https://codekarate.com Third & Grove Github: https://github.com/thirdandgrove/ Twitter: smthomas3 Youtube: codekarate

Thanks! shane@codekarate.com Twitter: smthomas3

Questions?