What is Strapi?

Strapi is an Open Source, self hosting, database agnostic, headless API with a fully customizable CMS, serving data and methods via Restful or GraphQL endpoints. Let’s shed some light on this jargon. 

Headless

A headless CMS means it only provides data and methods through an API instead of being part of a template engine and SDK. By separating data from the application language it can be used as a data source for any language or technology.

Database Agnostic

Strapi can be configured to work with (almost) any database of your choice. And can be set up using either MySQL, PostgreSQL, MongoDB or SQLite.

Customizable 

With its plug-in system and configurable setup and admin panel, Strapi is highly configurable to suit your needs. All data types are created from scratch with a set of predefined formats and data relations.

CMS

For an author, using the CMS is really easy since it supports many data types which can be combined to create any data structure. It also allows grouping repeatable fields in components and support relationships between types.

RESTFUL

Out of the box, Strapi provides a full REST API for all your collections with GET, POST, PUT and DELETE endpoints. The permission editor defines what actions are available for each user on each collection. 

GRAPHQL

It also fully supports GraphQL via a plug-in which automatically generates a schema based on collections, types and methods.

How does Strapi work?

The basic requirement to install Strapi is to have Node.js and yarn/npx installed on your machine. 

Start strapi installation with a quick start. Run the following command on Windows Powershell or Terminal on Mac.   

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

OR 

yarn create strapi-app my-project --quickstart

The above command will download and install the latest version of Strapi with the default settings, using a SQLite database, start the server on port 1337 and launch the admin dashboard.

Commands: These are some initial commands used to build and start the application.

# Start strapi in production mode

$ npm start

# Start Strapi in development mode with automatic restart

$ npm develop

# Build Strapi bundle files for production

$ npm build

Once you have installed strapi, your browser will open the backend interface on “http://localhost:1337/admin/” which is a local instance of Strapi running on port:1337. You can also run various instances of strapi on various ports by changing the port number in the  server.json file under .\config\environments\development\server.json. I will be using port:1339 from now on, since I have more than one instance of strapi running on my machine.  

Now we have the admin panel where users register with a username and password. This credential can be used to login to this particular instance while the server is running. 

After login we can see under Content-Types Builder Strapi comes with three inbuilt Collection Types which are Permission, Role and User

In this case a local user can  be created to continue with the API creation. 

For this blog we will start with creating some Collection Types . These can be considered as individual tables in the database. For BlogPost API let’s create a Collection Type named “Post” with the fields (title,content,image,user,comment), “Comment” with the fields (content, user, post). 

Here Strapi presents the option to create media for single or multiple uses. 

Users can also restrict data type for images, such as images/videos/files with possible file extensions. 

We need users to be added to the post table. Therefore, we create a relation to the USER collection type, which is shown below: 

When a relation is created Strapi presents you with various options such as post has one user, post has and belongs to one user, post belongs to many users, user has many posts, posts has and belongs to many users, post has many users. In this case we will select “User has many Posts”. 

Now Post collection type is ready to use. Do not forget to save before closing.  

Let’s now create the collection type for Comment. Comments will have content that the user creates and a relation to post and user collection type. We select the relation between a comment – post and comment – user is that “Post has many comments ”  and “User has many comments”. 

Let’s create some data. First create a user. 

And then create a post to connect to the user. In the post we enter title, content and an image. Then we assign a user to it. Finally we don’t have any comments for this post and we will create it through postman. 

Once that is done then we can create more posts. 

However, any table created in Strapi needs to have a public access which is provided through “Roles and Permissions”. 

For Posts and Comments we can find one or more of them and count them if needed. However, we are not allowed to create, delete or update them. 

As soon as a table is created Strapi creates the endpoints for each collection type. Users then can make the CRUD operations on those collection types. This feature is very useful to create some structure and data in a short time. It also allows deep filterings and parameters for the query. Using the Post table we present an example of some route for the API to get data:

// Get all posts[GET]
http://localhost:1337/posts
// Get one post[GET]
http://localhost:1337/post/1
// Get filtered posts[GET]
http://localhost:1337/posts?title_contains=Hello
// Get all. posts sorted on last updated, show 5 with 10 posts offset[GET]
http://localhost:1337/posts?_sort=updated_at:DESC&_limit=5_start=10

Now we have a backend server running and the API is exposed for use. Let’s test the newly created API using Postman. 

We will use REST to access data. For that we need to install the plugin through Strapi’s Marketplace. IT generates Swagger docs with which users can have an updated version of the API. Now let’s download documentation as shown below:  

Once installed user is presented with the following screen: 

Let’s click the “Open the documentation” which redirects to http://localhost:1337/documentation/v1.0.0#/  where REST API endpoints are generated as shown below: 

Since previously we have created multiple posts and gave permission to access that table, now we can write http://localhost:1337/posts on the browser and see all the available posts. 

We can also see the data using Postman. Let’s put the request for http://localhost:1339/posts to get all available posts.   

Now let’s create  a user through Postman. We put the JSON for User object with a few basic properties (e.g. username, email, password). Once the post request is sent a jwt token is provided which we then can use to authorise this newly created user when needed.  

Now let’s create a comment to a specific post. We will create the comment for the latest post that we created. In this case the post id is 4 and the user we would like to create it for is 2. Now send the request. 

The response we get is error of unauthorized as shown in the image below. That means we have not used the jwt token that was provided when the user was created

To fix the issue, by selecting the bearer token under the Authorization tab.  

As soon as we provide the authorization token, then resend the request to post a comment and try to get the specific post where we just added the comment. The result is as follows: 

Another feature provided by Strapi is a GraphQL plugin. Once that is installed through the marketplace it is accessible via http://localhost:1339/graphql. Once you access the url you will be presented with the graphql playground.  

On the right there is a tab named Docs, where you can see it presents all the collection types and their mutations that we are allowed to create. Now lets query some posts and comments and the results are shown below: 

Strapi doesn’t stop here. Now I will be briefly touching upon some more useful features. So bare with me. 

More features! 

User and Permissions: You can set up permissions for what kind of tasks users are allowed to do (e.g. CRUD)

Upload providers: If files are needed to be uploaded to AWS or Narrator you can use various providers for the service.  

Email providers: For email subscription or resetting user credential  mailchimp/sendinblue/moosend can be used as providers. 

Authentication providers: It also provides authentication via Google/Facebook and other auth providers that reduces the burden of creating a login feature for the application users. 

Cron jobs: “Cron Tasks allow you to schedule jobs (arbitrary functions) for execution at specific dates, with optional recurrence rules. It only uses a single timer at any given time (rather than reevaluating upcoming jobs every second/minute)” – strapi.io.

Media library: This feature allows users to upload various media files such as image, video at once and use manier times within the application. It also scales images for different formats.  

Web hooks: It provides a simple way for different applications to communicate and get notified when a new event happens. For example, webhooks are used when the application receives notifications from user tweets on Twitter or an SMS from Github.

Lifecycle methods: Lifecycle hooks are used to manipulate before and after data is created.  

Middlewares: It provides the feature to hook into the application using middleware that either handles a request completely, or processes the incoming request and passes it on to the next component in the pipeline. 

Custom access policies: It also provides users the ability to create custom policies to support individual business logic. For instance, certain data can only be deleted if the user is an administrator. In that case a policy named isAdmin created and used. This will verify if the user request is coming from a valid user. 

More information:  https://portal.productboard.com/strapi/1-public-roadmap

The good news is that Strapi introduced their first community version. A single blog post to cover the fascinating features of Strapi is too little. However, in my humble opinion all these great features are open source and free. This is hard to believe. But here you go, it is out there. Enjoy! Here are some links to find more elaborate information about Strapi.

https://strapi.io,

https://slack.strapi.io/,

https://github.com/strapi/strapi

Leave a Reply