If you’ve been searching for a powerful, flexible, and user-friendly headless CMS, look no further than Strapi CMS. Strapi is an open-source, JavaScript-based CMS that allows developers to easily build and manage API-driven content with a beautiful user interface. In this article, we will guide you through the process of getting started with Strapi. We will cover the installation requirements, creating a new project, setting up an admin user, managing content types, and consuming the API. By the end of this quick start guide, you will be equipped with the knowledge and skills to use Strapi for your next project.

Key Takeaways

• Strapi is an open-source headless CMS that simplifies the process of building and managing API-driven content with a user-friendly interface.
• Strapi can be used with various databases, including MongoDB, PostgreSQL, and SQLite.
• To get started with Strapi, you will need to install Node.js, Yarn, and the Strapi CLI.
• Creating a new Strapi project involves running a command in the terminal and filling out a form to set up the admin user.
• Strapi allows you to create and manage content types, set roles and permissions, and consume the API using frontend frameworks like Vue.js, Angular, or React.

Prerequisites

Before we dive into the steps to get started with Strapi, there are a few prerequisites you need to have in place:

1. Understanding of REST APIs: It will be beneficial to have some basic understanding of REST APIs as Strapi is an API-based CMS.
2. Postman: You will need Postman or any other API testing tool to test the API endpoints during the tutorial.

Now that we have everything we need, let’s get started with Strapi!

Step 1: Installing Node.js and Yarn

To create a Strapi project, you need to have Node.js installed on your machine. If you don’t have Node.js installed, head over to the Node.js downloads page and download the installer suitable for your operating system.

After installing Node.js, open your terminal and check if Node.js is installed properly by running the following command:

node -v

You should see the version number of Node.js displayed. Next, we need to install Yarn, which is a package manager used by Strapi.

To install Yarn, run the following command in your terminal:

npm install -g yarn

Once Yarn is installed, verify the installation by running:

yarn -v

You should see the version number of Yarn displayed. Now we are ready to move on to the next step.

Step 2: Creating the Strapi Project

To create a new Strapi project, we will be using the Strapi CLI (Command Line Interface). Open your terminal and run the following command:

yarn create strapi-app my-project --quickstart

Replace my-project with the desired name for your project. The --quickstart flag will set up the project with a SQLite database by default. If you want to use a different database, such as MongoDB or PostgreSQL, you can remove the --quickstart flag and follow the instructions in the Strapi documentation for configuring a different database.

This command will create a new folder named my-project (or the name you specified) containing all the necessary files and directories for your Strapi project. It may take some time for the command to complete, so be patient. Once the command finishes running, navigate to the project directory by running:

cd my-project

Now, let’s start the Strapi server. Run the following command in your terminal:

yarn develop

This command will start the Strapi server and serve it at http://localhost:1337/admin. Open your web browser and navigate to this URL. You should see the Strapi admin panel, where you can set up an admin user.

Step 3: Setting up an Admin User

Before you can start using Strapi, you need to create an admin user. In the Strapi admin panel, you will see a form prompting you to enter your email address and password. Fill in the required information and click on the “Register” button. Once the registration is successful, you will be redirected to the Strapi admin dashboard.

Congratulations! You have successfully set up your Strapi project and created an admin user. Now let’s move on to creating content types.

Step 4: Creating Content Types

Content types in Strapi are like object templates that define the structure and fields of the data you want to manage. To create a content type, follow these steps:

1. In the Strapi admin panel, click on the “Content-Types Builder” plugin on the left sidebar.
2. Click on the “Create new collection type” button.
3. Give your collection a name, for example, “Blog Post”.
4. Add fields to your collection type by specifying the field name, type, and any additional settings.
5. Click on the “Save” button to create the content type.

You can create multiple content types, each representing a different type of data you want to manage. For example, you can create a content type for “Blog Post” and another one for “Author”. Feel free to explore and experiment with different field types and settings.

Step 5: Managing Permissions

Strapi allows you to set permissions and roles for different users to control access to your content. By default, newly created content types are not available to public users. To make your content accessible, follow these steps:

1. In the Strapi admin panel, go to the “Roles & Permissions” section under “Settings”.
2. Click on the “Public” role to edit its permissions.
3. Scroll down to the “Permissions” section and enable the desired permissions for your content types.
4. Click on the “Save” button to save the changes.

Now your content types are accessible to public users. You can customize the permissions based on your specific requirements.

Step 6: Consuming the API

With your Strapi project set up and content types created, you can now consume the API using frontend frameworks like Vue.js, Angular, or React. Strapi provides integrations for these frameworks, allowing you to easily fetch and display your content.

To consume the API, you can use HTTP client libraries like Axios or fetch API. For example, to retrieve all blog posts, you can make a GET request to the /blog-posts endpoint. Remember to include the appropriate headers and authentication if required.

import axios from 'axios';

axios.get('http://localhost:1337/blog-posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

You can also use GraphQL to query your content. Strapi has an Apollo-based GraphQL plugin that provides additional flexibility in querying and retrieving data.

Who is Strapi CMS for?

Strapi CMS is suitable for developers who want to build API-driven applications with the flexibility to choose their preferred frontend technology. Whether you are building a simple blog or a complex web application, Strapi provides a user-friendly interface for content management and a powerful API for data retrieval and manipulation. Strapi is also a great choice for teams working on projects that require collaboration between developers and content editors.

In conclusion, Strapi CMS is a powerful and flexible tool for managing API-driven content. It simplifies the process of building custom CMS solutions by providing an intuitive interface and a robust API. With Strapi, you have the freedom to choose your preferred frontend technology and database, making it suitable for a wide range of projects. So go ahead, give Strapi a try, and unleash the full potential of your content management capabilities.

Happy coding!