Learn about managing application content in an Efficient Way

Arya Danech — Sat, 13 Jan 2024 01:33:51 +0000

Ever wanted to create a Full Stack Application but struggling with managing the Content to be stored and displayed? 🤔

Well, Strapi has got you covered ✅

If we want to develop a backend for any kind of application, we need to write code from scratch along with choosing a Database, planning out how the APIs will work, making authentications, etc.

But Strapi makes it easy to build and manage backend with it’s built-in features. Not only that but it also generates code for it which it 100% JavaScript 🚀

What is Strapi?

It is an open-source and fully customizable Headless Content Management System (CMS), meaning that developers have complete freedom over how the data will be displayed using any frontend framework.

It is completely functionable with any Framework using JavaScript / TypeScript.

Using Strapi, anyone can develop a Backend for any application within minutes of work.

It provides a very Interactive Admin Panel to create, manage and deliver content, using APIs to fetch and display those datasets across various applications.

Getting Started

Step 1: Installing Strapi

To get started, we need to run a simple command to build strapi application

npx create-strapi-app@latest PROJECT_NAME

yarn create strapi-app PROJECT_NAME

This will automatically create an entire admin panel for strapi which could be accessed from [localhost:1337/admin](http://localhost:1337/admin)

This is the look of the Strapi Admin Panel. Here you can manage all the collections that would be used to store data and displayed on the applications

Step 2: Designing Data

Just like developing Database Schema for any application, we would be structuring the data as we want, but without writing a Single Line of Code.

Strapi comes with a default User Collection which would be used for user authentication on our applications

From this page, we can create our own collection types as per our needs with just few clicks🖱️

Step 3: Adding a Collection Type

Firstly, Collections are just like tables in any Relational Database. Or it is also similar to Collections in MongoDB.

Now suppose we want to create a collection for storing books, we will initially create a collection type named book

Once the collection type is created, we will be able to define the fields that we wish to have in our book collection

While adding a field, we can mark it as required, specify it’s minimum and maximum length, and also mark it as a Unique field

After adding some fields in our collection type, we get to see something like this

Here we have defined some fields which are:

name (required, type → text, min. length → 3)
author (required, type → text, min. length → 3)
published (required, type → date)
price (required, type → number)
image (required, type → media)

After we are done with building our Collection Type, we can now add content in the collection through strapi dashboard itself by simply clicking on the Content Manager tab in the sidebar, then selecting our newly created collection type and then clicking on Create New Entry button

Here we get an interactive form, based on the fields chosen while building the collection type, to add data to our collection.

Just for an example I created an Entry for a Book which can be accessed from any application using API links

Step 4: Using the Content added in Strapi Collection

To access data from APIs, we need an API Token to access the data

In this case, the API token can be generated for a single or multiple Collection Types. We just need to Navigate to Settings > API Tokens (under Global Settings)

After that, we need to Specify permissions for Public and Authenticated users to a specific application. This can be set according to our needs by finding the settings under Users & Permissions Plugin tab.

There we can choose the actions that will be allowed to Authenticated or Unauthenticated users. For Example, recently we created a collection type named book

Now for this collection type, we can choose which type of users can create, update, delete, or even find a book.

Here as we select the actions allowed to the specified users, we get the API path to access the data.

Therefore, according to our example, we can find books if and only if we are authenticated, and it can be done by using the link localhost:1337/api/books

So this was the basic introduction to Strapi: Headless CMS. There is much more to explore in Strapi Admin Dashboard and it is free of cost.

Do checkout it's amazing website, https://strapi.io/ for more information

If you want tutorials on building projects with Strapi, here are some links to those as well 😉

So that is all for now. Feel free to reach out to me via LinkedIn or Twitter (X).
Do checkout my repositories on GitHub

Happy Learning 🚀

DEV Community: Arya Danech

Learn about managing application content in an Efficient Way

What is Strapi?

Getting Started