Strapi is a headless content management system (CMS).

A CMS is a software application used for web development that allows users to create, edit, and publish content.

A traditional CMS, such as WordPress, tightly couples the frontend and the backend—that is, the structure of the content and how it is presented. However, unlike traditional CMSes, a headless CMS is entirely decoupled from the presentation layer. The term headless comes from separating the head (the frontend) from the body (the backend). A headless CMS does not care about how the contents get displayed; instead, it provides a content-first approach with an API to access and display the data in any format desired.

You can see the differences between a traditional CMS and a headless CMS in the following diagram:

Figure 1.1: Traditional CMS versus headless CMS

"Strapi" is wordplay for Bootstrap API. As the name suggests, it aims to help developers build (bootstrap) an API quickly. Strapi saves API development time through an integrated easy-to-use admin panel and a solid set of core features out of the box. Whether you are a backend, full stack, or frontend developer, you will find it extremely easy to get started with Strapi and API development without reinventing the wheel and wasting time in building common features such as basic create, read, update, and delete (CRUD) operations or authentication and authorization.

Now that we have familiarized ourselves with Strapi, let's see some of the advantages of using it.

There are several advantages to using Strapi, and we will outline some of the major benefits and reasons for using it next.

Open-source Node.js

Strapi is open-source and built on top of a popular Node.js framework: Koa. Its code is accessible and easily extendible. It's supported by a thriving company but also by a large community of contributors. You can find Strapi's code on GitHub at https://github.com/strapi/strapi.

Database-agnostic

Strapi can work with different database systems. It can be set up and configured to work with PostgreSQL, MySQL, MongoDB, and SQLite. We will see in Chapter 9, Production-Ready Applications, how we can configure Strapi to work with PostgreSQL.

Customizable (extendable)

Strapi is highly configurable to suit each project's specific requirements. All of the data types are created from scratch through the admin panel. Additionally, the Strapi plugin system makes it easy to extend its functionality with features such as database documenting, image uploads, and email configuration. We will discuss the Strapi plugin system in a later chapter of this book.

RESTful and GraphQL

Strapi provides a REpresentational State Transfer (REST) API out of the box. The API can be consumed from any web client (React, Angular, Vue.js, and so on), mobile applications, or even internet of things (IoT) applications using REST or GraphQL via a plugin.

Users and permissions

Strapi comes with a users and permissions model out of the box that allows you to define which endpoint is available for which user/role. Additionally, you can use Open Authorization (OAuth) to enable authentication via third-party providers such as GitHub, Facebook, Twitter, Google, and many others.

Now that we have understood what Strapi is all about, let's see how we can prepare our development environment to start developing our API.

Before we start developing our API, we will need to prepare our development environment first. Next, we will look at the components and packages that we will be needing throughout the book.

Note

You can install the packages in any order you want. Some of the packages here are not a must-have, but it's highly recommended to install them to avoid having any issues while following the examples in this book.

Installing Node.js

To install Node.js, head to the official website, https://nodejs.org, and download the long-term support (LTS) version that matches your operating system. At the time of writing this book, version 16.13.2 is the latest LTS version and the version recommended by Strapi, as illustrated in Figure 1.2. Only LTS versions are supported by Strapi, the other versions of Node.js are not guaranteed to be compatible.

Figure 1.2: Node.js LTS version

Once you have installed Node.js, open your favorite terminal and run the following command to verify the Node.js version:

node –v

You should see the version of the installed Node.js on the terminal.

Installing Visual Studio Code (optional)

Visual Studio Code (VS Code) is a feature-rich and powerful integrated development environment (IDE), and we will be using it as our default editor. You are free to use whichever editor you feel comfortable with. However, we highly recommend installing and using VS Code to follow along with the examples in this book.

To download and install VS Code, head to https://code.visualstudio.com and download and install the appropriate build for your operating system.

Installing Yarn

Yarn (https://yarnpkg.com) is a JavaScript package manager. We will be using it as our default package manager since it's the package manager used by Strapi itself.

To install Yarn, open your favorite terminal and execute the following command:

npm install -g yarn

Once the installation is complete, run the following command to verify that Yarn has been installed successfully:

yarn –v

The version of Yarn should be displayed in the terminal. At the time of writing this book, version 1.22 is the latest version.

Installing Docker (optional)

We will be using Docker to install and manage a Postgres database for our API in a later chapter of the book. Docker can help us easily work with different database systems such as Postgres, MySQL, or MongoDB. To install Docker, head to https://docker.com/get-started and download and install Docker Desktop for your operating system.

Once you have installed Docker, execute the following command in your terminal to verify the installation:

docker –version

The Docker version should be displayed in the terminal. At the time of writing this book, version 20.10 is the latest version.

Alternatively, you can install Postgres using a different method of your choice.

Installing Postman

Postman is a great API client, and we will use it to interact with our API. Head to the Postman website at https://www.postman.com/downloads/ and download the version matching your operating system.

Once we have the development environment set up, we can proceed with creating our API.

Begin by running the following command on your terminal:

yarn create strapi-app strapi-lms --quickstart 

The preceding command will set up a project using the latest version of Strapi with the default settings. Using a SQLite database, start the server on port 1337 and launch the admin dashboard.

Note

If we remove the –-quickstart flag, we will enter manual setup mode, where we will be asked a few questions to configure Strapi.

If the admin panel did not launch automatically, you can open your browser and navigate to http://localhost:1337/admin.

The first time you log in to the admin dashboard, you will be presented with a form to create the first administrator user. Complete the form to create an administrator user and sign in to the admin panel.

Overview of the admin panel

We will discuss the admin panel in greater detail in Chapter 4, An Overview of the Strapi Admin Panel. However, for now, we will just give a quick overview of the admin panel layout.

The admin panel is easy to navigate. On the left-hand side, we have our main control sidebar. It can be divided into three main categories, as follows:

Figure 1.3: Strapi main sidebar

Content Manager

This is where the API content lives, and you can manage API content from this section. At the moment, there is only one model, Users. We will see more models here as we progress in developing the API.

Plugins

The PLUGINS section allows you to customize Strapi. There are two essential plugins available out of the box: the Content-Type Builder and Media Library plugins.

The Content-Types Builder plugin is the core of Strapi customization; we will use it to create new models in our API and create a relationship between those models. As this plugin is critical in developing the API, we have dedicated Chapter 3, Strapi Content-Types, to discussing it in greater detail.

The Media Library plugin, as the name suggests, is used to manage all API media files.

General

This section contains Strapi settings where you can use the Marketplace to install new plugins, configure plugin settings, and edit general settings such as adding additional administrator users.

The --quickstart flag will bootstrap the Strapi application and start the development server for us. While you are developing a Strapi application, you will want to start and stop the server yourself. Let's see in the next section how to work with Strapi scripts to manage the server.

Strapi comes with a few scripts that can be used in managing the development server as well as starting the server in production. If you open the package.json file, you will see the following four scripts:

Figure 1.4: Strapi server scripts

The develop script

The develop script will start the server in development mode, with autoreload enabled. Basically, it will watch for any changes in the project files and restart the server if there are any. This script is intended for local development, and it should never be used in a production environment.

The start script

The start script will start the server with autoreload disabled. This script is intended to start the server in a production environment.

The build script

This script allows you to rebuild the admin panel. The Strapi admin panel is built using React.js, but in some situations, you might want to customize or extend the admin panel. In such cases, you will need to rebuild the admin panel again using the build script. The admin panel is built once when you have created a project and every time you install a plugin that requires changes to the admin panel.

The Strapi script

This script is an alias to the Strapi command-line interface (CLI), and we can use it to generate new content in our system. We will explore the Strapi CLI in the next chapter.

In this chapter, we started by explaining the concept of a headless CMS and saw how it is different from a traditional CMS. We then introduced Strapi, an open-source headless CMS, and listed the benefits of using Strapi in developing APIs.

Then, we started preparing the development environment and installed the requisite packages and software, as well as creating a sample application that we will be using throughout the rest of this book. Finally, we had a quick look at the different server scripts offered by Strapi.

In the next chapter, we will have a deeper look at the typical structure of a Strapi application. We will also build our first API in the system and learn how to use the Strapi Content-Types Builder plugin to define fields needed for the API.