Strapi is an open-source flexible headless CMS that gives developers the freedom to select tools and frameworks as per their requirements while enabling editors to easily distribute and manage their content. If you need to create simple CRUD operations of APIs then that is just a work of few minutes. This accelerates content delivery while building beautiful digital experiences.

Key Features of Strapi

Open Source: It is an open-source and free-to-use service. The code is available on GitHub and maintained by hundreds of contributors.

Customizable: The Strapi admin panel, as well as APIs, are easy to customize.

Reduce API Development time: With Strapi, APIs can be developed in a very short time. This is possible even without coding if there are no customizations needed.

Inbuilt user authentication: There is inbuilt user authentication based on JWT tokens, and it can be customized based on requirements.

RESTful or GraphQL: One can choose to develop APIs in RESTful or GraphQL.

Self-hosted: Keep control of your data and your costs at all times.

Steps to QuickStart with Strapi

(Before you start make sure you have Node.js and npm installed properly.)

Developers that want to quickly start with Strapi should follow these steps. It will generate a sample project on your local system to get you started fast

    1. Run this command in terminal: npx create-Strapi-app sample-project –quickstart

Project structure

After you have run this command it will generate a project on your local system with the name “sample-project”. By default, the structure of your Strapi project looks as shown below:

• /.cache: contains files used to build your admin panel.
• /admin: (optional) contains your admin customization files.
• /api: contains the business logic of your project split into sub-folders per API. The names of these sub-folders will be based on the API resource name, and will be generated in run-time.
  • **
    • /config: contains the API’s configurations (routes, policies, etc.).
    • /controllers: contains the API’s custom controllers.
    • /models: contains the API’s models.
    • /services: contains the API’s custom services.

• • /build: contains your admin panel’s UI build.

• /config

• • /functions: contains lifecycle or generic functions of the project. 
    • /responses: contains custom responses.
      • 404.js: contains a template for constructing your custom 404 message.
    • bootstrap.js: contains the code that’s executed at the start of the application.
    • cron.js: contains the cron tasks.
  • server.js: contains the general configurations of the project.
  • database.js: contains the database configurations of the project.
• /extensions: contains the files to extend already installed plugins.
• /hooks: contains the custom hooks of the project.
• /middlewares: contains the custom middlewares of the project.
• /plugins: contains your local plugins.
• /public: contains the files accessible to the outside world.
• /node_modules: contains the npm packages used by the project.
  
  

  ---

  2. Navigate to http://localhost:1337/admin

  3. Fill in the details and create admin users.

  4. After successful login, you will be redirected to a home page as shown below.

After successful installation, you can see in the “Plugins” section that we have 2 plugins installed i.e. Content-Types Builder and Media Library.

• Content-Types Builder is useful for creating collections. When we are creating a collection it creates a table in the database. We can configure the database as per our requirements in the file path: config/database.js  of the code repository.
• Media Library plugin is useful to upload media-type assets. We can configure providers to upload media libraries on the cloud. Such providers can be configured in the file: config/env/envName/plugins.js.
  

  ---

  5. Navigate to Plugins and then to Content-Type Builder plugin and create a collection.

   

   

There are some auto-generated collections like Permission, Role, and User:

• The Permission collection is for holding permissions of controllers.
• We can also create our Custom roles, and this information is held in the Role collection.
• The User collection is for holding information for the Strapi admin users as well as application users (if it’s using Strapi’s authentication)
  

  ---

  6. After clicking on “Create new collection type”, it will open a popup like this: 

   

   

Set basic options like Display name and UID, from the Basic Setting option. And from the Advanced settings option, you can set more advanced information for collection.

7. Click on continue and you will be redirected to a new page as shown below. Here you can choose a field for your collection type.

There are multiple options for fields that can be chosen as per your requirements. You can create relations with other collections also using relation fields. There are multiple options for relations like One-one, One-to-many, many-to-one, and many-to-many. You can also provide all the table constraints here. 

After adding all the required fields in the collection, click on save. The field name mentioned here will be accessible in API with the same name. 

Now the changes will be reflected and collection will be visible in Collection Types. You can click on the collection view fields and enter the data.

8. Add Content to “Articles” collection:  Click on the “Add new article” button and fill in the required details and then click on “save”.  

9. Set Roles and Permissions: Navigate to settings and then to Users & Permissions Plugin and Click on Roles. There will be 2 default roles, Public and Authenticated.

Click on any role which you want to assign and Check Permissions. If you want APIs accessible publicly then assign a Public role and allow permission to endpoint.

 10. Publish the content: By default, any content you create is saved as a draft. To publish your content Navigate back to Collection Types – Articles

• Click on Draft Button and Click Publish Button 
• In the Please confirm dialog, click “Yes, publish” button.

So, you’ve seen how it is so easy to get started with Strapi. Now let’s see how you can make customizations to it.

Backend Customization

Sometimes the default Strapi CRUD APIs would not fulfill your requirements. In such cases, you have the flexibility to write APIs as per your requirements.

But for customization, you first need to understand Strapi’s default APIs. The file: “./api/**/config/routes.json” files define all available endpoints for the clients. By default, the Strapi collection generates Create, Read, Update and Delete (CRUD) APIs like: 

• GET /{{Collection Name}}: It will return all the fields data from a collection in the form of an array. 
• GET /{{Collection Name}}/count : It will return the count of elements in a collection.
• GET /{{Collection Name}}/:id: It will return data based on the id.
• POST /{{Collection Name}}: It will create a resource.
• PUT /{{Collection Name}}/:id : It will update resources based on an id.
• DELETE /{{Collection Name}}/:id : It will delete a resource based on an id.

Apart from these auto-generated endpoints we can also create custom routes as described below:

Creating a Custom Route 

You have to edit the routes.json file in one of your API folders (./api/**/config/routes.json), and manually add a new route object into the routes array.

For example : 

Create the Custom Controller

The Controller is a javascript file that will contain a handler for the endpoint. Here we can write the business logic for the application and it sends responses back. For the above example we can write a handler like this: 

Create Custom Services

Services are useful for writing a set of reusable functions. We can write common database queries as per our requirements. Example, for finding featured articles:

Custom Database Queries

Strapi provides a utility function Strapi.query to make database queries.

For more information on backend customizations in Strapi, please follow the official Strapi Documentation.

Conclusion

Strapi is fast accelerating the delivery of modern web applications. It also breaks the technical debt of customizations as we can customize everything in Strapi. Also, a very big community of developers is providing multiple open-source plugins for it, and it is trusted by thousands of users. We can easily manage content using a user-friendly admin interface, and Strapi can be integrated with any of your favorite tools. 

Strapi Practice at BigStep

We hope this article helps introduce you to Strapi. Though it is relatively new compared to the old CMS platforms, Strapi has gained adoption very fast with organizations of all sizes and is currently being used by many large enterprises. Developers love Strapi because of its underlying technology stack and architecture being modern. At BigStep, we have helped numerous customers build their web applications on Strapi, and have strong expertise in it.

Please feel free to reach out to us at: info@bigsteptech.com if you have any queries about Strapi, or about building your next application.