A presentation at Decoupled Days in in New York, NY, USA by Shane Thomas
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?
Gatsby and Drupal are a great match for building a fast statically generated site with the administration power of Drupal. However, anyone that has built a production level Gatsby/Drupal website has realized pretty quickly that while it’s great for developers, it’s not the most intuitive experience for content editors.
There are many common content editing dilemmas that show up on Gatsby/Drupal projects:
The team at Third & Grove has been working alongside the core Gatsby team to improve this content editing experience by bringing live preview capabilities to Gatsby sites built with Drupal. This live preview experience means that a content editor can edit a Drupal entity and immediately see what it will look like on the Gatsby site before it gets deployed.
This session is great for developers, site builders, and content editors considering building a Drupal site with Gatsby. It’s also for those that have a Gatsby/Drupal production site but are looking to improve the experience for content editors. Attendees will leave the session with strategies to improve the content editing process as well as knowledge on how to implement live preview on your Gatsby/Drupal sites.
for free. You
can too.