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.

Start Course
Ryan Irelan

I am the creator of CraftQuest, a web developer, and former software team manager. I spend most of my time improving CraftQuest with code and courses. When I'm not in front of the computer, I spend my time with my family, and running on the roads and trails of Austin, TX.

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 Native GraphQL Support in Craft As of Craft 3.3, there is native support for GraphQL in Craft. 02:13
18 Creating Schemas in Native GraphQL Native GraphQL allows us to create private schemas so we can control which data is exposed in GraphQL. 06:36
19 GraphQL Queries Basics on how to formulate a GraphQL query, fetch some Craft entries, and set and use a variable. 08:17
20 Entry Types and Parameters in GraphQL We cover how to output data based on entry type and use parameters in a query. 09:47
21 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
22 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
23 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
24 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