Getting Started with Strapi: A Beginner’s Guide

Sachini Dissanayaka
4 min readOct 20, 2023

Strapi is a versatile and developer-friendly headless CMS that empowers you to create, manage, and deliver content with ease. If you’re new to Strapi and eager to get started, this guide is for you. We’ll walk you through the basics, from installation to creating your first content type and running your Strapi project.

Why Strapi?

Strapi offers several advantages, making it a top choice for content management:

  • Open Source: Strapi is open-source, meaning you have full control over your content and the platform itself.
  • Customization: You can easily customize your API, content models, and administration panel to suit your project’s needs.
  • Flexible Content Modeling: Strapi’s content types allow you to define your data structure and relationships between content.
  • User-Friendly: The user interface is user-friendly, making it accessible to content managers and developers alike.
  • Community and Ecosystem: Strapi has a growing community and offers a wide range of plugins and integrations.

Prerequisites

Before we begin, make sure you have Node.js and npm installed. You can download and install them from the official Node.js website.

Installation

To start, let’s create a new Strapi project:

  1. Open your terminal and run the following command to create a new Strapi project:
npx create-strapi-app my-strapi-project --quickstart

2. Once the installation is complete, navigate to your project folder:

cd my-strapi-project

4. Start your Strapi project:

npm run develop

This command will start the Strapi development server, and you’ll be able to access your Strapi project in your browser at http://localhost:1337/admin

Creating Your First Content Type

Now that your Strapi project is up and running, it’s time to create your first content type. In Strapi, content types define the structure of your data.

  1. Access the Strapi admin panel by going to http://localhost:1337/admin in your browser. You'll be prompted to create an admin account.
  2. Once you’ve set up your admin account, log in to the Strapi admin panel.
  3. In the admin panel, click on “Content-Type Builder” on the left sidebar.
  4. Click “Create new collection type.”
  5. Name your collection type, for example, “Article.”
  6. Now, add fields to your content type. Click “Add another field,” and you can create fields like “Title” (Text), “Content” (Rich Text), and “Author” (Relation to the User collection).
  7. Save your content type.

Populating Your Content

With your “Article” content type created, you can now add content to it:

  1. In the Strapi panel, click on “Content Manager” on the left sidebar.
  2. Click on “Article” under the collection types.
  3. Click the “Create new entry” button.
  4. Fill in the details for your article, such as the title, content, and author.
  5. Click “Save” to create your first article. And now it will be in the Draft mode.
  6. Click “Publish” to publish your article to the public.

Accessing Your Data

Strapi provides a powerful API to access your data. To access your newly created articles, you can make HTTP requests to your Strapi server, or use Strapi’s SDKs for various platforms.

Here’s an example of how to fetch articles using JavaScript and the axios library:

const axios = require('axios');

axios.get('http://127.0.0.1:1337/api/articles')
.then((response) => {
const articles = response.data;
console.log(articles);
})
.catch((error) => {
console.error(error);
});

Special Note

Ensure that you have granted the required permissions for both Authenticated and Public users to access the data.

Documentation

To gain deeper insights into the Strapi Plugin Documentation, visit the following link and explore the details: Strapi Plugin Documentation on the Strapi Marketplace.

  1. Install the Plugin: In your Strapi project directory, run the following command to install the Strapi Documentation plugin:
npm install @strapi/plugin-documentation

2. Start Your Strapi Project: After the installation is complete, start your Strapi server:

npm run develop

3. Access the Documentation Interface: With your server running, you can now access the Strapi Documentation interface through your browser by visiting http://localhost:1337/documentation/v1.0.0 (assuming your Strapi project is running locally).

Congratulations! You’ve successfully set up Strapi, created your first content type, and added content to it. This is just the beginning of your journey with Strapi. You can now explore advanced features, customizations, and integrations to build powerful applications and websites with ease.

In future articles, we’ll delve deeper into Strapi’s features and capabilities, such as custom API endpoints, user authentication, and advanced content modeling.

Stay tuned, and happy Strapi-ing!😊

--

--

Sachini Dissanayaka

Software Engineer | Computer Science & Engineering graduate at University of Moratuwa