WordCamp 2019 - WP Headless and Gatsby

http://rebrand.ly/wp-gatsby-guide

Why headless

• Security
  • static files
  • no data
  • separate concerns
• Performance
  • cdn integration
  • scalability
  • market is improving
• Cost
  • lean infrastructure
  • free is possible
  • flexible

pre-req

Chrome, NodeJS, NPM, GIT, (?NVM)

WordPress

using Gutenberg

GatsbyJS

Gatsby is a React-based, GraphQL powered, static site generator

Cmds

• npm install -g gatsby-cli (for global)
• gatsby new workshop-wordpress-gatsby-react (to scaffold site)
• cd into then npm install
• gatsby develop (to start server)
• npm install --save gatsby-source-wordpress
  • once you install plugins, gatsby has to be reloaded
  • you have to set up the config file for the specific site you want that gatsby-source-(wordpress) to connect to
  • gatsby-source seems to pull data in right away - FROM THE REST API, you don't even have to mess with the GraphQL plugin on the WP side eg https://wcpboston.eelab.space/wp-json/${Manufacturer}/v2/${Endpoint} == { allWordpress${Manufacturer}${Endpoint} { edges { node {}}} (nb: Next.js allows you to push data back to server) #### super interesting plugins
• https://www.gatsbyjs.org/packages/gatsby-source-shopify/?=source
• https://www.gatsbyjs.org/packages/gatsby-source-mysql/?=source

for Vue instead

https://dev.to/mittalyashu/gatsby-for-react-and-gridsome-for-vuejs-281c
or https://gridsome.org/ for Vue
Nuxt is the thing -- https://nuxtjs.org/

GraphQL

handled by Gatsby from REST API

ReactJS

Build

gatsby build will save down all content to rendered files in /public
good question about previewing content since it will be distinct front end - gutenberg helps a lot with that, basically the same as how we are using VisualCustom whatever

npm website scraper to grab static
serverless js - https://serverless.com/framework/
https://github.com/jdub233/PAGE-CAPTURE-S3 LAMBDA TO CAPTURE