Gatsby & Drupal Sitting in a Tree

A presentation at New England Drupal Camp 2019 in November 2019 in Rhode Island, USA by Shane Thomas

Slide 1

Slide 1

Gatsby and Drupal Sitting in a Tree New England Drupal Camp 2019

Slide 2

Slide 2

Name: Shane Thomas Relevance: Senior Developer at Third & Grove What else: Who Am I… and why should you care? • I created CodeKarate.com with hundreds of Drupal videos • 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 - Gatsby / Drupal 4. Live Demo #2 - Live Preview 5. Live Demo #3 - Live Preview Setup 6. 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

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

Slide 8

Slide 8

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

Slide 9

Slide 9

The Common Misperception

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

…but isn’t my current CMS good enough?

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

Demo #1 - Drupal & Gatsby Setup

Slide 20

Slide 20

The Problem

Slide 21

Slide 21

Demo #2 - Live Preview

Slide 22

Slide 22

*Backup Video in case the live demo goes horribly wrong

Slide 23

Slide 23

Demo 3 - Live Preview Setup

Slide 24

Slide 24

*Backup Video in case the live demo goes horribly wrong

Slide 25

Slide 25

*Backup Video in case the live demo goes horribly wrong

Slide 26

Slide 26

*Backup Video in case the live demo goes horribly wrong

Slide 27

Slide 27

– So what is the future of Live Preview?

Slide 28

Slide 28

A More Integrated Editing Experience

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Integration with Drupal’s Content Moderation system

Slide 32

Slide 32

Keystroke Preview

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

Thanks! shane@codekarate.com Twitter: smthomas3

Slide 37

Slide 37

Questions?