Blog Series: Building a website with a headless CMS, Part 2: Integrate the CMS

Or: How to build the Squidex website with Squidex CMS.

This is post #2 in my new series about the headless journey:

We are finally ready to start with the integration. So let’s start.

1. Create model classes

In the last part we improved our templates and introduced dynamic models:

Now it is time to create classes for these models. I use the Squidex client library for that. It provides some basic functionality to make the integration a little bit easier, but it is just a wrapper over the REST endpoint and you can use the programming language of your choice.

Just some words about the annotation over each property. Here we tell the JSON deserializer to use custom converter for the annotated properties, which is called InvariantConverter.

When you query content from the Squidex API, each field is an object, for example a content item could have the following structure:

{
"id": "123...",
"data": {
"title": {
"iv": "User Management"
}
}
}

The reason is that localized fields would have one value for each configured language and we want to have the same structure for all fields, not regarding if they are localized or not. The iv key stands for invariant. But the JSON deserializer has to map the JSON object to our model class and would throw an error, because the field object cannot be converted to the string property automatically. We could also use Map structures for our model properties, but they are not very convenient to use. The InvariantConverter solved this problem for us and makes the conversion possible.

2. Create the schema

When you have a look to our model class it is really obvious how our schema has to look like. We also added validation rules to make all fields required. The icon field is a string with a HTML textarea editor and contains the icon as SVG code. In contrast to an asset field we have the advantage that our website or the Browser does not have to make an additional call for each feature to load the icon.

The schema for our model class

3. Create the content

The most boring part. Copy the content from our HTML views to Squidex. Of course the ingratiation has not been completed yet, but we need some test data and in this case we have relatively few content items.

The features

4. Query the content

In the last step we use the client to query the content from our schemas. We also make use of asynchronous programming model here and query the data we need for the home page in parallel. I already converted the testimonials to Squidex and also the blog posts but more about this in a later blog post.

Our controller for the home page

We also have to adjust the template a little because the models that we built with the Squidex client library has different structure than the dynamic models we started with, but this is only a 5 minutes task.

Over all I spent around one hour for this task, including the mapping of the testimonials to Squidex and I can add new content now without having to deploy a new version of the website.