Getting Started with Strapi: A Beginner???s Guide

Strapi is a headless CMS built with Node.js that allows developers to manage and deliver structured content via APIs. It simplifies backend development by automatically generating REST or GraphQL endpoints based on content models, making it easier to connect with any frontend framework or platform.

The setup process includes installing Strapi, creating custom content types, managing entries through a visual admin panel, and configuring access permissions. Once configured, content can be retrieved using public API endpoints, making Strapi a flexible solution for building content-driven applications.

Prerequisites

Before installing Strapi, make sure your development environment is properly configured. The required tools and versions are listed below:

• Node.js: Version 18 or later
• npm or Yarn: Latest stable version
• Database: SQLite (default), PostgreSQL, MySQL, or MongoDB
• Git (optional but recommended)

Check Node.js version:

node -v

Explanation:

node -v: Displays the current version of Node.js installed on your system. The -v flag stands for "version," and it outputs the version number in the format vX.X.X.

Installing Strapi CLI

Strapi provides a command-line interface (CLI) to scaffold and set up new projects quickly. There are two common ways to create a Strapi project:

• Using npx (recommended for one-time use without global installation)
• Installing the CLI globally using npm (useful if you plan to create multiple projects)

Recommended: Use npx for Quickstart

The easiest way to get started is by using the npx command:

npx create-strapi-app@latest my-project --quickstart

Explanation:

• npx: Executes the CLI tool without permanently installing it. This ensures you're using the most recent version.
• create-strapi-app@latest: Specifies the official CLI package for creating a new Strapi project. The @latest flag ensures the most up-to-date version is used.
• my-project: This is the name of the folder where the new Strapi project will be created. You can change my-project to any valid directory name.
• --quickstart: Instructs Strapi to automatically use the default database (SQLite), install dependencies, start the development server, and open the admin panel in the browser.

This command is ideal for testing or small projects since it uses SQLite, which requires no external configuration.

Optional: Global Installation

Alternatively, to install the Strapi CLI globally:

npm install -g create-strapi-app

Then create a project with:

create-strapi-app my-project --quickstart

Explanation:

• npm install -g create-strapi-app: Installs the create-strapi-app package globally on your system using npm (Node Package Manager), allowing you to easily create new Strapi applications from anywhere in your terminal.
• create-strapi-app my-project --quickstart: Initializes a new Strapi project named my-project with the --quickstart flag, which sets up the project with default configurations and starts the development server immediately.

Using the --quickstart option is ideal for beginners as it requires minimal setup and launches a fully functional development server with the admin panel ready to use.

Project Structure

Once the Strapi project is created, the project directory contains a predefined structure to organize configuration files, API logic, source code, and public assets. Below is a typical layout of a newly generated project:

my-project/
????????? api/ # API definitions
????????? config/ # Environment settings
????????? database/ # SQLite file (or connection config)
????????? public/ # Static assets
????????? src/ # Source code
????????? package.json # Dependencies and scripts

Explanation:

• api/: Houses models, controllers, and routes
• config/: Manages environment-specific settings
• src/admin/: Admin panel frontend (React-based)

Understanding this structure is essential for navigating the codebase, customizing APIs, and managing environment-specific settings efficiently.

Running the Strapi Server

Once the project is installed, you need to launch the development server to start using Strapi. This mode enables features like hot-reloading and detailed error messages, making it ideal for building and testing APIs during development.

Command to start the server in development mode:

cd my-project
npm run develop

Explanation:

• cd my-project: Changes the current working directory to the my-project folder, allowing you to run commands or interact with files within that directory.
• npm run develop: Executes the develop script defined in the package.json file of the project, typically used to start the development server.

Access the admin panel at: http://localhost:1337/admin

On first launch, you"ll be prompted to register an admin user (email, password, etc.). This account will have full access to the backend interface.

Creating the First Content Type

Strapi allows you to define your own content types using a visual interface. This is how you model data such as blog posts, products, or user profiles. Each content type maps directly to a database table and an API endpoint.

Example: Creating an Article Collection Type

To define a new collection type in Strapi (e.g., Article), follow these steps:

Step 1: In the admin panel, navigate to the sidebar and click on Content-Type Builder.This tool allows you to visually create and manage data models.

Step 2: Choose Collection Type (for storing multiple entries like articles, products, etc.). Give the type a name:

• Singular name: article
• Plural name: articles (auto-generated)

Step3 : Define the schema by adding the Title (Text), Body (Rich Text), and Published (Boolean).

Step 4: After defining the fields, click Continue and then Save. Strapi will automatically update the database schema and restart the server if needed.

Step 5: Click Save and deploy to make the new content type available in the Content Manager and API endpoints.

Populating Content

After creating a content type, you can begin adding actual entries"this is the core data your API will serve. Strapi provides a built-in Content Manager to create, edit, and manage entries directly from the admin interface.

Adding Content to the Article Type

Step 1: From the admin sidebar, click on Content Manager. You"ll see a list of all collection types you"ve created, including Article.

Step 2: Click on the Article collection. Then click the "Create new entry" button in the top right corner.

Step 3: You"ll see a form with all the fields defined earlier in your Article type.

• Title: Enter the article headline (e.g., "Strapi Basics")
• Body: Add your content using the rich text editor
• Published: Toggle this on to mark the article as published

Step 4: Click Save (or Save & publish if the toggle is enabled). At this point, the data is stored in the database but won"t be publicly accessible until permissions are updated.

Enabling Public API Access

By default, Strapi restricts API access to authenticated users. You must explicitly allow public read access for unauthenticated users to fetch content.

Step 1: Go to the Settings panel from the sidebar. Under Users & Permissions Plugin, click Roles. Select the Public role (this applies to non-logged-in users).

Step 2: Scroll down to the Permissions section. Under Article, enable → find → that allows fetching a list of articles and → findOne → that allows fetching a single article by ID.

Step 7: Scroll to the bottom and click Save.

Accessing Content via REST API

Once public permissions are enabled for the Article content type, Strapi automatically exposes RESTful API endpoints. These endpoints allow external clients (like frontend apps or third-party services) to fetch the content in JSON format.

Example Endpoints:

List all articles

GET http://localhost:1337/api/articles

Get a single article by ID

GET http://localhost:1337/api/articles/1

Explanation:

• GET http://localhost:1337/api/articles: Sends a GET request to the specified URL to fetch all articles from the API running on a local server.
• GET http://localhost:1337/api/articles/1: Sends a GET request to retrieve the article with ID 1 from the same local API.

Sample API Response:

{
"data": {
"id": 1,
"attributes": {
"Title": "First Post",
"Body": "This is a test article.",
"Published": true
}
}
}

Explanation:

• data object: The main wrapper for the resource returned by Strapi. It contains the record's ID and a nested attributes object.
• id: Unique identifier of the article in the database.
• attributes: Holds the actual content fields defined in the model, such as Title, Body, and Published.

Deployment Notes

Strapi supports multiple deployment options suitable for different hosting environments. For production, it's recommended to avoid SQLite and use a robust database like PostgreSQL.

Common Deployment Options:

• Heroku: Deploy easily with PostgreSQL; SQLite is not supported in production environments.
• DigitalOcean App Platform: Supports containerized deployment with custom domains and scaling.
• VPS or Custom Servers: Use PM2 for process management or Docker for containerized setup.

Common Development Commands