Download to read offline
Uploaded byJesus Manuel Olivas
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
This document discusses embracing a headless CMS approach using Drupal and GatsbyJS. It begins by describing the traditional monolithic CMS model and some of its challenges around performance, reliability, security, and hosting. It then introduces static site generators and the JAMstack as an alternative approach that addresses these challenges. It provides examples of headless CMS options like Contentful and NetlifyCMS that can be used with Gatsby. Finally, it demonstrates a specific setup using Drupal as a headless CMS with an export plugin and Gatsby starter theme to build sites in a decoupled way.
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
- 1. Embracing the modernweb using Drupal as Headless CMS with GatsbyJS by Jesus Manuel Olivas / weKnow #DecoupledDays #DecoupledDays2019
- 2. $ whoami Jesus ManuelOlivas jmolivas@weknowinc.com twitter.com/jmolivas github.com/jmolivas drupal.org/u/jmolivas jmolivas.weknowinc.com
- 3. Mexicali Mexico + California Calexico California+ Mexico $ ifconfig
- 4.
- 5.
- 6.
- 7. Drupal … Drupal… Drupal
- 8. When all youhave is a hammer, everything looks like a nail.
- 10.
- 11.
- 12.
- 13. Performance Visitor Server CMSDatabase
- 14. Reliability - TheTraditional Stack
- 15. Reliability - TheTraditional Stack + Cache
- 16. Reliability - TheHeadless Stack
- 17. Reliability - Amore advanced Stack
- 18. Security > Stack dependencies >Platform dependencies core > Custom modules dependencies > Third party libraries
- 19. Hosting > Managing acomplex stack is not easy. > Requires knowledge of managing servers, databases, cache, DNS, backups, automation, and much more. > The more complex your stack is to support your production site, the more expensive it becomes.
- 20. Is there anythingelse we can use?
- 21.
- 22. Back to theflat-files
- 23. JavaScript Any dynamic programmingduring the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework, library, or even vanilla JavaScript. APIs All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services. Markup Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.
- 24.
- 25. Challenges • Web Forms(CRM Integration , Serverless Function, Form submission PaaS) • E-Commerce (Shopify, Salsify, PXM, Headless Commerce, Stripe, Paypal, Recurly) • Comments (Disqus, Serverless functions) • GUI (WYSIWYG for user to manage content)
- 26. Decoupling the "Content ManagementSystem" from the “Production Environment".
- 27. ● Git Based /Headless CMS ● CloudCannon NetlifyCMS Forestry Blaze Sanity GraphCMS Contentful
- 28. How about theDrop?
- 29. Drupal CMS +Tome to export as Flat Files + ● Build
- 31. Gatsby is afree and open source framework based on React that helps developers build blazing fast websites and apps
- 32. The Content Mesh ●https://www.gatsbyjs.org/blog/2018-10-18-creating-compelling-content-experiences/
- 35. https://github.com/weknowinc/drupal-boina # Clone repository gitclone git@github.com:weknowinc/drupal-boina.git # Copy .env file cp .env.dist .env # Start containers ahoy up # Install Composer dependencies ahoy composer install # Install Boina distribution ahoy drupal boina:install
- 36. https://github.com/weknowinc/gatsby-starter-drupal-boina # Download Starter gatsby new boina https://github.com/weknowinc/gatsby-starter-drupal-boina cd boina # Copy environment file cp .env.dist .env.development # Update environment variables DRUPAL_HOST=http://drupal-boina.develop/ # Start Gatsby in development mode gatsby develop
- 37. Use theme # DownloadStarter gatsby new boina https://github.com/weknowinc/gatsby-starter-drupal-boina cd boina # Copy environment file cp .env.dist .env.development # Update environment variables DRUPAL_HOST=http://drupal-boina.develop/ # Start Gatsby in development mode gatsby develop
- 38. Must have plugins •gatsby-source-drupal • gatsby-transformer-remark • gatsby-remark-drupal (support drupal images) • gatsby-remark-images • gatsby-remark-external-links • gatsby-plugin-sharp • gatsby-plugin-react-helmet
- 39. TUI Editor (WYSIWYGfor markdown)
- 40. Build Hooks (Triggera external build hook)
- 41. What is Gone •Twig • Render array • Theme layer • Theme preprocessing • *Views (use GraphQL instead) • Data modeling. • Content editor capabilities, revisions, moderation and scheduling. • Pathauto • Site Settings What to keep using
- 42. ● Build● API/ GraphQL
- 43. Feel free toturn off your Drupal after build ●https://twitter.com/ckaotik/status/647020262001614848
- 44.
- 45. Choose the righttool for the job
- 46. Thank you …Questions? Feel free ask here and via twitter @jmolivas #DecoupledDays #DecoupledDays2019