 Resources from Kevin Cunningham in 2021

WordPress has been around for a long time and powers a huge number of sites.

Just because WordPress isn't brand new doesn't mean it can't get the job done!

Running WordPress as a Headless CMS gives you the benefit of a great content creation experience on the back end with the powerful Gutenberg editor while allowing you to use a modern JavaScript framework on the front-end.

In this course, Kevin Cunningham will guide you through setting up WordPress as a headless CMS from scratch, as well as migrating from an existing WP site. You'll get practice with different WordPress content types, implement a GraphQL endpoint for querying data, and backup & deploy your site. All the while, you'll deepen your understanding of how headless WordPress approaches the relationship between content & rendering.

Using WordPress as a headless CMS turns it into a datasource ready to work with Gatsby, Next.js, or whatever else you want to build with. Your and your clients will be able to take advantage of WordPress's content editing experience, without having to settle for a cookie-cutter theme on the frontend.

With WordPress being decoupled from the rendered site, the database isn't hit for every request. This means faster performance and more security against WordPress exploits. You don't even have to host the editor at the same domain as the published site.

### While watching, consider...

- What are the tradeoffs of using a CMS for a site?
- Would headless WordPress work for me or my clients in this scenario?

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

wordpress

WordPress as a Headless Content Management System (CMS) and GraphQL API

Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Building an API with Express

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

mongoose

One of the great things about NoSQL databases is that you do not have to decide on your data schema while developing. As you get closer to production though, you'll often want to more clearly define the shape of the data you are working with.

Enforce Schemas in MongoDB using Mongoose Models

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

A Toast is a non modal, unobtrusive window element used to display brief, auto-expiring windows of information to a user. They are used for status messages and persist between page changes until they have been seen. We'll use the react-toast-notifications library to add this functionality to a basic app. 

Use react-toast-notifications to add toast notifications to a NextJS app

In this lesson, we set-up an Express application and have it send a test response. We then test that the server is working using an API client, in this case Insomnia. We'll also install and setup nodemon so our server will reload every time our files change making development much faster.

Set up Express to Automatically Reload on Save with nodemon

In this lesson we'll introduce our Catchphrase app and use our Express API to serve the image URL. We'll add our custom client side fetch call and deal with CORS issues created by serving our API and application from different origins.

Return JSON from Express and Handle CORS Errors 

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

By default, git provides `master` as the default branch. This lesson shows how to get round that and use an alternative as the default branch.

The key is to switch to a new branch before you add your first commit, I choose `main` in this lesson. When I push `main` up to Github as the first branch, it gets set to the default.

Configure a New Github Repo to Use a Different Default Branch

By default, git provides `master` as the default branch. This lesson shows how to get round that and use an alternative as the default branch for an existing repo.

Configure an existing Github repo to use a different default branch

In this lesson we will look at serving static files using the static helper provided by Express.

We'll then use the file system module in Node to read the contents of our static directory, select a random file and send the path back to our client.


Serve a random static file with Express

By default, Express doesn't parse JSON passed in the request body. In fact, the request body is seen as null by Express.

We need to add middleware to allow Express to be able to access the information passed in. In the past, we've had to lean on other libraries such as body-parser. As of version 4.17, Express now comes bundled with it's own JSON middleware.

We will use that middleware in this lesson, build some logic and send a response back to our client.

Parse and Process JSON with Express

Express provides a straightforward workflow to add functionality between the request and the response.

In this space your application can check the request, query other APIs and build up the response in parts before sending the final response.

In this lesson, we'll add an authenication middleware that will check for a specific header and confirm that it has the correct value. If either of these tests fail then the middleware will send an early response with a 401 status.

Create Custom Middleware for Authentication in Express

In this lesson, we'll look at how to handle errors in syncronous and asyncronous request handler functions. 

We'll also look at custom error middleware that allows for better control over how we return errors to our client based on whether we are in a production or development environment.

Handle Syncronous and Asyncronous Errors in Express

One way to secure API routes is by using JSON Web Tokens (JWTs) which are passed with each request and checked before a lesson is returned. To do this, you need an OAuth server to provide the signing and authentication of these tokens. Auth0 provides this for free for up to 7,000 users. 

In this lesson, we'll configure Auth0 and gather the details we need to be able to secure our API routes.

Configure an Auth0 API Authentication to Use with Your Server

Sending a JSON Web Token is one way to valid your identity as a user of an API or service. In this lesson, we will see how to add an Express middleware which will check for a valid JWT and return a 401 Unauthorized error if not.

Add Middleware to Validate a JSON Web Token (JWT)

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

Bite-size video tutorials for badass web developers.

egghead

In this lesson, we'll add some middleware to support the upload of files to our Express server. 

We'll test for validity, handle errors and move the file to our storage directory.

Finally, we'll test our route using our API client.

Create an upload route in an Express API

There are tasks that would be great to automate more and, if you are using G-Suite, there are built in tools to help you along.

In this lesson, we'll take a form responses, process it and create a calendar event based on the response.

We'll use a Google App script which has a large selection of classes ready for use.

You can find more documentation here https://developers.google.com/apps-script/reference/.

Use Google App Scripts to create a calendar event from form responses

I'll give you an overview of the basic web application architecture that is involved with setting up a headless WordPress site.

A WordPress application is made of three key components:

- A web-server
- The file system
- The database

It used to be an arduous task to get set up locally to run a WordPress instance. You needed to correctly download and configure a web-server and a database. You then needed to get the files installed in the correct place for the web-server to be able to access them. This was particularly grueling on a Windows system.

The WordPress hosting company, FlyWheel, has a tool called Local which I use exclusively for all my WordPress development. With a few clicks a web-server is configured, the files downloaded and the database prepared for you.

Configure and Start a WordPress Instance using Local

In this lesson, we will explore the `/wp-json` route and some of the default functionality. 

WordPress gives us a lot of options and data to work with right away. The number of routes available can be overwhelming but we will be focusing on the `/wp/v2` routes available. There are a number of routes that involve posts and individual posts including revisions and autosaves. As well as similar routes for pages, tags, and taxonomies.

You'll want to continue to explore the `/wp/v2` routes available to you.

Explore Pages, Tags, and Taxonomies in the WordPress JSON Route

We will create a new post with a comment. This is done in a tool call Gutenberg that WordPress has pre-installed for you with every fresh site. There are quite a few options available to you on how you want to structure your posts but I will show you a few.

Then, we'll look at how that post is rendered on WordPress's frontend and work out how we'd gather that same data on the REST API. You'll see in the end how you will need to make several API calls to fetch all the data you need through the API. This is because the initial call to `/posts/#ID` gives you all the posts' contents but also gives you the ID to the author and comments on the post that you will need to fetch to display correctly.

Create and Explore a Single WordPress Post Through Gutenberg and the REST API

As we saw in [Create and Explore a Single WordPress Post Through Gutenberg and the REST API](https://egghead.io/lessons/egghead-explore-a-single-post-through-the-rest-api?pl=headless-wordpress-4a14), there is a lot of data available to you. This data might not be configured exactly how you'd like it. For instance, maybe you want comments to load with the initial call to `/posts/#ID` without having to make additional calls for Author and Comments.

In this lesson, you'll see how to extend a behavior by adding an action in the `functions.php` file that lives in `/wp-content/themes/twentytwenty`. We will use `register_rest_field` to add Comments to the request for a post.

Topics

Instructors

Content Type

Kevin Cunningham