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:

1IntroductionLet's take a few minutes to review what we'll cover in this course. 02:10
2What We'll CoverLet's take a few minutes to review what we'll cover in this course. 02:35
3What is Headless?There are a lot of opinions about what a headless CMS is and is not. Here's my take. 04:09
4Element API and JSONIntroducing the Element API Plugin and a quick refresher on JSON. 04:30
5Installing the Element API PluginThe Element API requires a first-party plugin, which is convienently available in the Craft Plugin Store. 02:04
6Defining an API EndpointLet's start our API by defining an endpoint. 01:51
7Accessing Entries in the APIHow to expose Entry elements via the Element API. Almost as if it is what it was made for! 06:25
8Accessing the API with JavaScriptWith a basic endpoint done, let's access that data and use it in some JavaScript. 08:36
9Adding an Entry EndpointA 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
10Accessing Assets in the Element APIMoving on to more Elements, let's review how we can access and expose Asset Elements in the Element API. 09:45
11Accessing Assets in Elements in the Element APIAssets 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
12Using the Assets Endpoint with JavaScriptNow 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
13Accessing Global Sets in the Element APINext up we learn how to access Globale Sets in the Element API. 04:45
14Accessing Matrix Blocks in the Element APIA Matrix field takes a little bit of extra work to make available in the Element API but it's still straight-forward. 08:37
15Introduction to GraphQLWe talk about what GraphQL is and a general idea of how it works. 10:40
16Installing GraphQL via CraftQLNow that we're done talking about GraphQL, let's install it via CraftQL and starting using it. 07:57
17Native GraphQL Support in CraftAs of Craft 3.3, there is native support for GraphQL in Craft. 02:13
18Creating Schemas in Native GraphQLNative GraphQL allows us to create private schemas so we can control which data is exposed in GraphQL. 06:36
19GraphQL QueriesBasics on how to formulate a GraphQL query, fetch some Craft entries, and set and use a variable. 08:17
20Entry Types and Parameters in GraphQLWe cover how to output data based on entry type and use parameters in a query. 09:47
21Querying Global Sets in GraphQLLike we did earlier with the Element API, let's look at how we can access Globall Sets via GraphQL queries. 03:19
22Querying Matrix Elements in GraphQLJust like we did with the Element API, let's access a Matrix field (inside of a Global Set) via GraphQL. 03:29
23Using Vue.js, Apollo Client, and GraphQLWe use the GraphQL client Apollo and learn how to build a list of recent posts from Craft. 09:44
24Auth and Restricting Access in Element API and GraphQLTo 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

More you should learn about Headless: