Strapi's Content-Type Builder

Learn about content-types and the Content-type Builder that Strapi provides.

We'll cover the following

Overview

The Content-type Builder is one of Strapi’s default plugins. This is where we can create and manage content types. One important thing to know is that it’s only available in the development environment. It can be accessed from the navigation bar on the left side of the Strapi Dashboard. In the Content-type Builder, we can create and manage types and components. Components are a data structure that can be used in different places in the Strapi application. They can be used in multiple collection types and single types.

Creating content-types

Let’s take a look at how to create content-types in the Content-type Builder page of the Strapi admin panel.

Creating collection types and single types

First and foremost, we need to learn how to create collection types because they’ll be the most used content-type. Let’s see how to create a new collection type using the Content-type Builder:

  • Click the “Create new collection type” button in the subnavigation of the “Content-Type Builder.”

  • Fill in the “Display name” field. We’ll use “Recipe” for this example. The “API ID (Singular)” and the “API ID (Plural)” fields will be filled in automatically. Click “Continue” to move forward.

  • Click the type of field needed for the collection.

  • Add the name of the field in the “Name” text field. Now, we can click “Finish” to create the collection or click “Add another field” to add another field to the collection.

  • Repeat the previous two steps for all the fields of the collection type.

Creating a single type has the same set of steps as the collection type. The main difference between the two is that a single type only stores a single value, and a collection type stores multiple values.

In the following code, the /src/api/recipe/content-types/recipe/schema.json file contains the details of the Recipe content-type that we created:

Note: A Strapi administrator user has already been created for this course. The details of the user are as follows:

  • Email: jane.doe@email.com

  • Password: Password123

'use strict';

module.exports = {
  /**
   * An asynchronous register function that runs before
   * your application is initialized.
   *
   * This gives you an opportunity to extend code.
   */
  register(/*{ strapi }*/) {},

  /**
   * An asynchronous bootstrap function that runs before
   * your application gets started.
   *
   * This gives you an opportunity to set up your data model,
   * run jobs, or perform some special logic.
   */
  bootstrap(/*{ strapi }*/) {},
};
The Strapi application for our Recipes application

In the code above, there are a few things we do to make it compatible with the API that we’re already using in the application. For now, the /src/api/recipe/content-types/recipe/schema.json file is the important one. This is the file that contains our recipe schema. We created it to be the same as the schema for TheMealDB API that we’re using. We also add an idMeal field and mark it as required and unique in lines 153–157. We’ll use this field as our unique identifier by defining custom routes in the upcoming lessons.

Creating components

Before we start to create components, we need to know what components are and what purpose they’ll serve us in creating our back-end services. Components are a combination of different fields that are grouped together and can be reused in different content-types. Components can be of two types: repeatable and non-repeatable.

Non-repeatable components are components that can only have one entry in a content-type. On the other hand, repeatable components can have multiple entries in a content-type.

Note: We select a component to be repeatable or non-repeatable while connecting it to a content-type, not while creating the component.

Now that we have an idea of what components are, let’s start creating them. Here are the steps we need to create a component: