CMS has been around for quite some time. CMS refers to the content management system. Strapi is a headless CMS for Node.js. Strapi provides GUI for creating different content types and user management baked in the platform. Strapi supports both Restful API and GraphQL. Strapi supports both NoSQL and SQL databases. Changing the database is as simple as changing environment variables.
Strapi requires Node.js installed on the system. Node.js can be downloaded from the official website. Strapi provides a boilerplate generator
create-strapi-app, for setting up the application. It can be installed globally using npm using the following commands.
create-strapi-app is simple just pass the name of the project.
--quickstart will create a project with a default setting.
An admin user is required to be created before Strapi can be used. Start the server using
npm run develop.It starts the server on
http://localhost:1337. Admin user is created using
Once the boiler-plate is ready. Admin UI can be used to build database schema for API.
Strapi provides easy UI for the creation of database schema. For changing configuration, we have to edit out project files. For example, for changing the
env variable we have to edit the
Strapi includes a content-builder plugin which provides a great UI for creating a database schema. The plugin is independent of the database. The same schema can be used in the SQL and NoSQL databases. The demo website would have a Blog Collection type and Comment Collection type. The blog would store most of the content of different articles. Comment collection will store comments on blog and user information.
Creating a Collection We will start by login into our admin at http://localhost:1337/admin. We now open the Content-Types builder page by clicking on Content-Types Builder from the sidebar.
Now create a new collection named “Blog”. This would store blogs for the site. It would have the title, image, and content.
Now we would create a collection named “Comment”. This would store comments for the blog. It would have content, user, blog.
blog field store the link to the blog on which comment was created and user store details about the user who created it.
We have created links from comments, one to user collection, and other to blog collection. Blog collection and user collection don’t have information about the link. Now our backend is all set.
We would install documentation-plugin from the “Marketplace” section for easy access to API details. This plugin would create the swagger specification for the API.
Authentication is a very important aspect of any application. Strapi has JWT based authentication out of the box. A default key is used for signing JWT. Signing key can be changed in the configuration file
/extensions/users-permissions/config/jwt.json. API for user signup and login is already baked in the platform.
We will use the
local provider for authentication. This password and email/username are used for authenticating a user. If we open “Documentation” from the Sidebar, it will provide an option to see the swagger API documentation.
We click on “Open the Documentation” to view swagger API Documentation. If we navigate to “UsersPermissions- User” we can see there are API to create a user and login user.
We will use
Strapi has two roles by default. These roles are used to control access to content.
- Public role is for an unauthenticated user
- Authenticated is for an authenticated user.
These roles are automatically assigned to a user based on authentication status. We would allow “Public” users to read blogs and comments and “Authenticated” users can comment on the blog and edit comments. Roles can be edited in the “Roles and Permission” section.
Edit public Roles to allow access to Blogs and Comments
Now let us add comments to our demo website. For adding comments a user must be authenticated. We need to control write access to comment collection by customizing controller for “Comment” collection. The controller for every collection is located in the
api folder. For changing controller edit file
We need to install
strapi-utils for editing our controller.
We just add an extra layer over the function provided by strapi, so that we can add user data to the request body, and rest is handled by strapi. Now we need to change the “Authenticated” user role so that users can create, edit, and delete comments.
We give a user permission to create, delete, edit comments.
For the frontend, we will use Gatsbyjs. We would create a new gatsby project using
gatsby new frontend. File structure for our project is:
- card.js contains a simple card component that displays information provided to it as props.
- dialog.js contains a dialog for sign in and signup.
- blog.js is used to display blogs and comments.
- index.js is the homepage, it display list of blogs
- 404.js shows URL not found.
We make a GET request to API
/blogs to fetch all the blogs. Then it maps over a list of blogs and displays Card component for each blog. It also contains code for displaying login/register dialog. When the user clicks on a Card it navigates them to
We make a POST request to
/auth/local/register for user signup with a username, email, and password. When a register is successful, a JWT token is returned which is saved in local storage and can be used later. For log in we make a POST request to
/auth/local with two fields
identifier can be email or username.
We will take the details of the blog from the location prop passed to the page. We will fetch comments for the blog using a GET request to
blog-id is the id of the current blog. We make a POST request to
/comments with JWT token in the header. This token is saved in the local storage.
Strapi support both NoSQL and SQL database. Changing the database is as simple as changing the env variable in the configuration folder. By default, Strapi uses SQLite which is good for local testing but in production one should use a production-ready database like PostgresSQL or MySQL. We will use PostgreSQL. For changing the database we will edit
Now it will pick database credentials from the environment variable in production.
We have gone through some of basic of Strapi. Strapi is great for creating a backend API. It is very customizable and supports a wide array of integration. Strapi can be used with Nuxtjs, Reactjs, Angular any frontend framework. We learned how to create database schema with relations, authentication, customizing controllers, and filtering data.