Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
0 likes434 views
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 modern web using Drupal as Headless CMS with GatsbyJS by Jesus Manuel Olivas / weKnow #DecoupledDays #DecoupledDays2019
- 2. $ whoami Jesus Manuel Olivas [email protected] twitter.com/jmolivas github.com/jmolivas drupal.org/u/jmolivas jmolivas.weknowinc.com
- 3. Mexicali Mexico + California Calexico California + Mexico $ ifconfig
- 4. weAre
- 5. weKnow
- 7. Drupal … Drupal … Drupal
- 8. When all you have is a hammer, everything looks like a nail.
- 12. Challenges Performance Reliability Security Hosting
- 13. Performance Visitor Server CMS Database
- 14. Reliability - The Traditional Stack
- 15. Reliability - The Traditional Stack + Cache
- 16. Reliability - The Headless Stack
- 17. Reliability - A more advanced Stack
- 18. Security > Stack dependencies > Platform dependencies core > Custom modules dependencies > Third party libraries
- 19. Hosting > Managing a complex 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 anything else we can use?
- 22. Back to the flat-files
- 23. JavaScript Any dynamic programming during 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. Visitor CDN The JAMStack Stack
- 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 Management System" from the “Production Environment".
- 27. ● Git Based / Headless CMS ● CloudCannon NetlifyCMS Forestry Blaze Sanity GraphCMS Contentful
- 28. How about the Drop?
- 29. Drupal CMS + Tome to export as Flat Files + ● Build
- 31. Gatsby is a free 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 git clone [email protected]: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 # 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
- 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 (WYSIWYG for markdown)
- 40. Build Hooks (Trigger a 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 to turn off your Drupal after build ●https://twitter.com/ckaotik/status/647020262001614848
- 44. Live Demo
- 45. Choose the right tool for the job
- 46. Thank you … Questions? Feel free ask here and via twitter @jmolivas #DecoupledDays #DecoupledDays2019