Headless Craft CMS

A beginners guide to using Craft CMS as a headless CMS. In this course we look at two different API tools: Element API and CraftQL. The Element API is a REST-style read-only API that is available via the first-party Element API plugin. CraftQL is a GraphQL implementation in Craft via Mark Huot's CraftQL plugin.

During the course we'll cover each API approach and learn a lot along the way.

Headless Craft CMS is made up of the following videos:

1 Introduction Let's take a few minutes to review what we'll cover in this course. 02:10
2 What We'll Cover Let's take a few minutes to review what we'll cover in this course. 02:35
3 What is Headless? There are a lot of opinions about what a headless CMS is and is not. Here's my take. 04:09
4 Element API and JSON Introducing the Element API Plugin and a quick refresher on JSON. 04:30
5 Installing the Element API Plugin The Element API requires a first-party plugin, which is convienently available in the Craft Plugin Store. 02:04
6 Defining an API Endpoint Let's start our API by defining an endpoint. 01:51
7 Accessing Entries in the API How to expose Entry elements via the Element API. Almost as if it is what it was made for! 06:25
8 Accessing the API with JavaScript With a basic endpoint done, let's access that data and use it in some JavaScript. 08:36
9 Adding an Entry Endpoint A good REST API will have multiple endpoints. Let's build one that exposes the full content of an entry so we don't have to expose all of the entry data in a single API endpoint. 05:55
10 Accessing Assets in the Element API Moving on to more Elements, let's review how we can access and expose Asset Elements in the Element API. 09:45
11 Accessing Assets in Elements in the Element API Assets are typically used in the context of Entries. Let's look at how we can access the Assets and expose the data in the API. 12:57
12 Using the Assets Endpoint with JavaScript Now that we have our Assets API ready, let's test it with some JavaScript code. This time we'll use a Vue.js slideshow app. 07:36
13 Accessing Global Sets in the Element API Next up we learn how to access Globale Sets in the Element API. 04:45
14 Accessing Matrix Blocks in the Element API A Matrix field takes a little bit of extra work to make available in the Element API but it's still straight-forward. 08:37
15 Introduction to GraphQL We talk about what GraphQL is and a general idea of how it works. 10:40
16 Installing GraphQL via CraftQL Now that we're done talking about GraphQL, let's install it via CraftQL and starting using it. 07:57
17 GraphQL Queries Basics on how to formulate a GraphQL query, fetch some Craft entries, and set and use a variable. 08:17
18 Entry Types and Parameters in GraphQL We cover how to output data based on entry type and use parameters in a query. 09:47
19 Querying Global Sets in GraphQL Like we did earlier with the Element API, let's look at how we can access Globall Sets via GraphQL queries. 03:19
20 Querying Matrix Elements in GraphQL Just like we did with the Element API, let's access a Matrix field (inside of a Global Set) via GraphQL. 03:29
21 Using Vue.js, Apollo Client, and GraphQL We use the GraphQL client Apollo and learn how to build a list of recent posts from Craft. 09:44
22 Auth and Restricting Access in Element API and GraphQL To wrap up the course, we look at ways we can protect our API endpoints. We use some custom code for the Element API and review tokens in CraftQL. 17:25