React + GraphQL + WordPress with Zero Server Management

By Jesse R Weigel

Elevator Pitch

Learn how to set up a lightning fast React app and headless WordPress with GraphQL for content management all without the need to maintain a server. We will go over using cloud technologies for MySQL and media files, and Now to serve our React app and WP.

Description

Based on a real, large scale project!

Learn how to set up a lightning fast React app and headless WordPress with GraphQL for content management all without the need to maintain a server. We will go over using cloud technologies to host MySQL and all our media files for WordPress, and Now (from Zeit) to serve our React app and WordPress. We will create custom routing and caching for React using NodeJS and Express.

Why would you want to do this? - Automatic scaling - Deployment and updates with no downtime, straight from the terminal - Track WordPress with Git - Automatic database and media file backups - Speed of React + User friendliness of content management with WordPress

Is this talk pushing a particular product? - This can be done using Google Cloud, AWS, Azure or any similar services. - Similar setup could use React and WordPress alternatives.

Outline: - Intro to React: What it is and why would you use it - Setup Dev Environment: Help participants set up their machines to work with React. Optionally, a cloud IDE can be used. - Bootstrap a React app using Next.js - Set up Apollo to fetch GraphQL data - Create custom parameterized routes using Express - Fetch data with Apollo’s Query component based on route parameters - Deploy apps using Now - Explain next steps to further improve apps with styling, seo optimization, advanced routing, complex GraphQL queries, etc. and alternate ways to build and deploy. (If time allows)

Notes

The necessary tech for this talk includes a laptop with NodeJS (I prefer to use my own), an internet connection, and a projector.

I believe that I can speak well about this because I have developed several sites using these techniques. During the development, I live streamed my work nearly every day for a hour or two each day. So I have already explained and answered questions about these technologies for literally hundreds of hours. You can see some examples of this in the “Live Coding with Jesse” series on the freeCodeCamp YouTube channel. https://www.youtube.com/c/freeCodeCamp