Getting Started with Strapi

What is Strapi?

Before going into the details of Strapi, let’s revisit the definition of headless CMS.

A headless CMS is a content management system where the content repository is separated from the content presentation (the layer responsible for displaying that content). This approach allows us to have separate places to manage the back-end content and the presentation of the content. The content can be managed separately and it can still be displayed across any of the multiple front-end systems available to us. This is very helpful because we can now integrate our content into any system, whether it’s a desktop web application or a mobile application.

Strapi is one of the most popular headless content management systems. It’s open source and based on Node.js.

Why do we need Strapi?

In our application, we’re currently just fetching a bunch of recipes from an API and displaying them to the users. That isn’t much of an application, so let’s add a bit more functionality and a few more features that will make our application better.

The feature we’re adding to the application will allow the users to save recipes as favorites and return to them whenever they need to revisit the recipe. For this, we’ll first have to create authentication for the user. Then, we’ll have to save the recipes as part of the user so that every user’s favorites are unique.

Requirements

We want to add two things on top of the existing functionality of the application:

• Allow users to save recipes for future reference.

• Allow users to add new recipes, which should also be available for other users.

To meet these requirements, we have to do a few things. First, we’ll have to create a collection type similar to TheMealDB API that we already have integrated with our application. Next, we’ll have to authenticate users so we can store the recipes the user has saved.

Meeting these requirements

First and foremost, we need to create a collection type that saves the recipes. We can name it Recipe. After that, we need to edit the default User collection to have a field that will save the recipes of the users. We can make the field have a relation with the Recipe collection. Finally, we need edit permissions for the application to allow users to manage and create their favorites.

We’ll be meeting these requirements incrementally as we go along with the sections in this lesson.

Getting started with Strapi

Now that we know what Strapi is, we can start working with it. The first thing we need to do is create a Strapi application.

Creating a Strapi application

Strapi applications can be created automatically by using the following command in the terminal:

This command creates a directory and names it my-first-strapi-app. This directory will contain all the setup required for developing and running a Strapi application.

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

This is what the created Strapi application looks like:

Let’s briefly discuss what the original application files hold. Here are the important files and folders that we need to know about:

1. /config folder: This is the folder that has the configuration files of all our application’s parts. These include the server, database, admin panel, middleware, and API.

2. /src folder: This folder will contain the source code of the application. Whenever we update our Strapi application from the admin panel, this is the folder where the changes occur.

When we run the application above, we’re taken to the Strapi home page, where we can start working on our Headless CMS functions.

Creating the first administrator

Let’s take a look at how to create the first administrator of our application in the slides below:

Congratulations! You’ve successfully created a Strapi application.