Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal & Gatsby: Headless and blazing fast

202 views

Published on

Chad Carlson, Platform.sh
https://www.linkedin.com/in/chad-carlson-1529365a/

"Headless CMSs are the new buzzword, and lots of companies consider moving their sites in that direction. They want to be able to have content creators focus on the content in a backend service, and developers focus on the rest, with the promise of painless collaboration as a result. Who knows if that's the real effect, but it's a thing, and Drupal has a seat at the table when it comes to sourcing data into a Gatsby site.

This talk will cover the basics of Gatsby, its source plugin ecosystem and the advantages gained from using external services to build content in Gatsby with the help of GraphQL. Then after those basics, we'll see how Drupal's API interacts with Gatsby, and how together they can be deployed on a single multi-app project on Platform.sh. Finally, we'll enable Gatsby's Live Preview feature, resulting in a final built site in production, but dynamic development environments that update the frontend in an instant with a live preview of every content edit as it's made. "

Drupal Virtual Cafe #1
https://www.facebook.com/drupalcampkyiv/

Published in: Education
  • Be the first to comment

Drupal & Gatsby: Headless and blazing fast

  1. 1. Headless and blazing fast Drupal & Gatsby
  2. 2. Howdy! Chad Carlson Platform.sh Technical Writer Developer Relations
  3. 3. ● Gatsby ● Source plugins and the Headless CMS ● Multi-apps on Platform.sh ● Gatsby + Drupal ● Live preview in development Table of contents
  4. 4. Gatsby
  5. 5. Gatsby Add image in this space Gatsby (not just a) Static Site Generator ● Node.js ● React-based ● Page templating ● Smart imports Project structure ● /src/pages/: js for individual pages (i.e. index.js, articles.js) ● /src/templates/ : templates used when programmatically creating pages (i.e. article.js) ● gatsby-node.js: used to actually create node pages (an article path) ● gatsby-config.js: main config; site metadata; plugins.
  6. 6. (not just a) Static Site Generator ● Node.js ● React-based ● Page templating ● Smart imports Project structure ● /src/pages/: js for individual pages (i.e. index.js, articles.js) ● /src/templates/ : templates used when programmatically creating pages (i.e. article.js) ● gatsby-node.js: used to actually create node pages (an article path) ● gatsby-config.js: main config; site metadata; plugins. Gatsby
  7. 7. Source plugins and the Headless CMS
  8. 8. Gatsby builds ● Can define plugins in gatsby-config.js ● Those plugins can define content sources: like Strapi, WP, Drupal ○ gatsby-source-strapi ○ gatsby-source-wordpress ○ gatsby-source-drupal ● Along with other services: Stripe ● Content essentially cached in Gatsby’s Data Layer via GraphQL, during build → generates site ● Trade-off: longer build, faster client-side experience Source plugins Add image in this space
  9. 9. Multi-apps on Platform.sh
  10. 10. Multi-apps Virtual cluster (via YAML) ● Router container (routes.yaml) ● 0+ Service containers (services.yaml) ● 1+ Applications (.platform.app.yaml) ○ runtime (nodejs/php) ○ build/deploy hooks ○ start command ○ disk Communicating with each other ● Each app can have relationships defined to other app containers ● For Gatsby: drupal used to pull content during post_deploy hook
  11. 11. Multi-apps Virtual cluster (via YAML) ● Router container (routes.yaml) ● 0+ Service containers (services.yaml) ● 1+ Applications (.platform.app.yaml) ○ runtime (nodejs/php) ○ build/deploy hooks ○ start command ○ disk Communicating with each other ● Each app can have relationships defined to other app containers ● For Gatsby: drupal used to pull content during post_deploy hook
  12. 12. Multi-apps Virtual cluster (via YAML) ● Router container (routes.yaml) ● 0+ Service containers (services.yaml) ● 1+ Applications (.platform.app.yaml) ○ runtime (nodejs/php) ○ build/deploy hooks ○ start command ○ disk Communicating with each other ● Each app can have relationships defined to other app containers ● For Gatsby: drupal used to pull content during post_deploy hook
  13. 13. Multi-apps Virtual cluster (via YAML) ● Router container (routes.yaml) ● 0+ Service containers (services.yaml) ● 1+ Applications (.platform.app.yaml) ○ runtime (nodejs/php) ○ build/deploy hooks ○ start command ○ disk Communicating with each other ● Each app can have relationships defined to other app containers ● For Gatsby: drupal used to pull content during post_deploy hook
  14. 14. Gatsby + Drupal
  15. 15. gatsby-source-drupal ● Content available by default on Drupal at /jsonapi ● allows us to pull in Gatsby content ● Define baseURL using our drupal relationship in our Gatsby container Pathauto ● Used to modify /node/XX to /articles/title-slug with /articles/[node:title] ● gatsby-node.js will then reproduce that pattern, so that node aliases and paths in Gatsby are 1:1 gatsby-config.js Add image in this space
  16. 16. gatsby-source-drupal ● Content available by default on Drupal at /jsonapi ● allows us to pull in Gatsby content ● Define baseURL using our drupal relationship in our Gatsby container Pathauto ● Used to modify /node/XX to /articles/title-slug with /articles/[node:title] ● gatsby-node.js will then reproduce that pattern, so that node aliases and paths in Gatsby are 1:1 gatsby-node.js Add image in this space
  17. 17. gatsby-source-drupal ● Content available by default on Drupal at /jsonapi ● allows us to pull in Gatsby content ● Define baseURL using our drupal relationship in our Gatsby container Pathauto ● Used to modify /node/XX to /articles/title-slug with /articles/[node:title] ● gatsby-node.js will then reproduce that pattern, so that node aliases and paths in Gatsby are 1:1 gatsby-node.js Add image in this space
  18. 18. Live Preview in development
  19. 19. Live Preview Add image in this space Gatsby ● gatsby build pulls in all content and performs final build to public/ ● gatsby develop exposes a /__refresh endpoint that will refresh content in the Data Layer from Drupal ● ENABLE_GATSBY_REFRESH_ENDPOINT=true Drupal ● Install Gatsby Live Preview module ● Configure to point at /__refresh, from the gatsby relationship ● Content edits result in rebuild → live preview of the new Gatsby site
  20. 20. Gatsby ● gatsby build pulls in all content and performs final build to public/ ● gatsby develop exposes a /__refresh endpoint that will refresh content in the Data Layer from Drupal ● ENABLE_GATSBY_REFRESH_ENDPOINT=true Drupal ● Install Gatsby Live Preview module ● Configure to point at /__refresh, from the gatsby relationship ● Content edits result in rebuild → live preview of the new Gatsby site Live Preview Add image in this space
  21. 21. Live Preview Add image in this space Gatsby ● gatsby build pulls in all content and performs final build to public/ ● gatsby develop exposes a /__refresh endpoint that will refresh content in the Data Layer from Drupal ● ENABLE_GATSBY_REFRESH_ENDPOINT=true Drupal ● Install Gatsby Live Preview module ● Configure to point at /__refresh, from the gatsby relationship ● Content edits result in rebuild → live preview of the new Gatsby site
  22. 22. Live Preview Add image in this space Gatsby ● gatsby build pulls in all content and performs final build to public/ ● gatsby develop exposes a /__refresh endpoint that will refresh content in the Data Layer from Drupal ● ENABLE_GATSBY_REFRESH_ENDPOINT=true Drupal ● Install Gatsby Live Preview module ● Configure to point at /__refresh, from the gatsby relationship ● Content edits result in rebuild → live preview of the new Gatsby site
  23. 23. Thank you! Chad Carlson Technical Writer, Platform.sh chad.carlson@platform.sh github.com/chadwcarlson

×