Gatsby and Drupal Sitting in a Tree New England Drupal Camp 2019
A presentation at New England Drupal Camp 2019 in November 2019 in Rhode Island, USA by Shane Thomas
Gatsby and Drupal Sitting in a Tree New England Drupal Camp 2019
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
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!
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?
