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.
Premium designed free icon set with marks in SVG, Webfont and raster formats. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products. #Step 1: Create a docker-compose.yaml file. Create this docker-compose.yaml file in an empty folder. A fresh new Strapi application will be created where the docker-compose.yaml file is located. This docker-compose defines our database and Strapi. Free and open self hostable workflow automation tool. Strapi is the most popular open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content.
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. Drivers moore industries port devices.
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 .configenvironmentsdevelopmentserver.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:
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.
WARNING
The Alpha version of Strapi is no longer supported, please use the Beta version. You can find the relevant documentation here.
This Tutorial is written for developers who prefer a more detailed step-by-step introduction. (A less detailed introduction can be found at Quick Start Guide.)
By following this tutorial, we will get Strapi installed globally onto your system, and then create your first Strapi project.
NOTE
You need to have Node.js and npm installed on your system prior to following these steps. If you do not have Node.js and npm installed or are not sure, please visit our Installation Requirements.
Table of contents:
# 1. Install Strapi globally
Strapi is now installed globally on your computer. Type strapi -h in your command line to access available Strapi commands.
# 2. Create a new project
Navigate to your parent Projects/ directory in your command line. Enter the following command to create a Strapi Quick Start project.
Path: ~/Desktop/Projects/ $
The command will automatically create a Strapi project cms folder within your parent Projects/ directory.
NOTE
When you create a new Quick Start project in Strapi, you will download all the node modules, the Strapi files necessary and the Strapi plugin files. THIS STEP CAN TAKE SEVERAL MINUTES DEPENDING ON YOUR INTERNET CONNECTION SPEED. Please wait for the process to complete before cancelling or trying to continue.
NOTE
You can replace the /cms project name with any name you want.
You will see something like this:
This will open your default browser to the Welcome page for creating an admin user.
NOTE
Using the --quickstart flag will install Strapi using a SQLite database. You may leave off the flag, but will need to follow the configuration steps for a different database.
# 3. Create an admin user
The first user you create is the root user for your project. This user has all privileges and access rights. You will need to complete the following fields:
- Username, create a username for login access to your project, eg.
paulbocuse - Password, create a unique password for your project
- Email address, this will be used for recovery
- Check Receive news, this is optional but recommended
- Click the Ready to Start button
After your admin user is registered, you will see the Strapi admin panel:
# 4. Create a Content Type
At this point, your project is empty. You need to create a Content Type.
We can define a Content Type as a collection of entered data represented by fields. For example, a Content Type called restaurant may be intended to display information regarding restaurants. A restaurant has a name, a main image, a description, maybe even a link to the restaurant menu.
Another example, is a Content Type called menu which is made up of menu items. These have a name, description of the menu item, an image and perhaps even a list of ingredients.
Any collection of entered data that can have fields can be a Content Type. They allow you to manage a class of information in an organized manner.
We will use the Content Type Builder plugin to make the process easy to create a Content Type.
Go to the Content Type Builder plugin, located in the left menu: PLUGINS --> Content Type Builder.
We will create two content types. We will create a content type called Restaurant and one called Category.
NOTE
Content Type name is always singular. For example, restaurant not restaurants. For example, category not categories.
# The Restaurant Content Type
The Restaurant Content Type will have a String field for the restaurant name, and a Text field (with a WYSIWYG editor) for the restaurant description.
- Let's now add a content type.
Click the '+ Add Content Type' button.
Now enter a 'Name' for your New Content Type (we will call this one restaurant), and below write a 'description'. We will write Recommended Restaurants for the description.
Then click the Save button.
- Now you are ready to add the content type fields. We will add a String field for the Name and a Text field for a short Restaurant description. Click on the + Add New Field button.
Next we will click on the String field.
You should be under the BASE SETTINGS tab, in the Name field, type Name. This will be the name of the restaurant.
Now, click on the ADVANCED SETTINGS tab, check Required field and Unique field. This field is required for each restaurant and is not optional. Also, we want each restaurant to have a unique name, so we check the Unique field box. And then click the Continue button.
We are now ready to add the second field, Text for the restaurant description. Click the + Add New Field button.
From here, click the Text field.
You should be under the BASE SETTINGS tab, in the Name field, type Description. This will be the description of the restaurant.
Now, click on the ADVANCED SETTINGS tab, check Display as a WYSIWYG. This field will provide a rich text editor. And then click the Continue button.
Lastly, we will save this Content Type. Click the Save button.
Wait for Strapi to restart, and then we will be able to create the CategoryContent Type.
# The Category Content Type
The Category Content Type will have a String field named category for categories assigned to restaurants, and a Relation field with a Many to Many relationship.
Let's now add this second content type. Click the + Add Content Type menu item.
Now enter a name for this new Content Type (we will call this one category), and write a Description. We will write Restaurant Categories for the description. Then click the Save button.
Now you are ready to add the content type fields. We will add a String field for the Name and a Relation Field for creating a Many to Many relation between the Category Content Type and Restaurant Content Type. Click on the + Add New Field button.
Next we will click on the String field.
You should be under the BASE SETTINGS tab, in the Name field, type Name. This will be the name of the category.
Kob laptops & desktops driver download for windows. Now, click on the ADVANCED SETTINGS tab, check Required field and Unique field. This field is required for each category and is not optional. Also, we want each category to have a unique name, so we check the Unique field box. And then click the Continue button.
We are now ready to add the second field, the Relation field for the Many to Many relation setting between Categories and Restaurants. Click the + Add New Field button.
From here, click the Relation field.
This will bring you to the Add New Relation screen. We will change two elements on this page for the Relation field.
First, click on Permission (Users-Permissions) and change it to Restaurant (on the right side).
The second element to change is to click the Many to Many icon (in the middle). It should now read, 'Categories has and belongs to many Restaurants'. Then click the Continue button.
Lastly, we will save this Content Type. Click the Save button.
Wait for Strapi to restart.
Verify in the left menu under CONTENT TYPES, that you see Categories, Restaurants and Users.
# Files structure
A new directory has been created in the Project/cms/ folder of your application which contains all the needed files related to your restaurant and category Content Types. Take a look at the API structure documentation for more information.
# 5. Manage and add data to Content Type
After creating the Content Types, we now need to manage and add data to the new Content Types.
We will create an entry of a restaurant called, Strapi Restaurant with a description saying, Strapi restaurant is a cosy restaurant delivering one of the very fastest and nicest dining experiences in the world, combining nods to tradition with fierce modernity, warmth with daring.
We will then assign two Categories, Italian and Contemporary to this restaurant.
Click on Restaurants under the CONTENT TYPES menu in order to Add New Restaurant.
Next click on the + Add New Restaurant button (in the top right corner). Go ahead and type Strapi Restaurant in the Name field, and type the content (above) into the Description field. Then press the Save button (in the top right corner).
When it is saved, you will see your restaurant listed in the entries. From here you can edit it or add a new restaurant.
We have NOT added a Category to the Restaurant we created. We first have to add the actual Category items to the Categories content type.
We will next assign two Categories, Italian and Contemporary to this restaurant.
Click on Categories under the CONTENT TYPES menu on the left.
Now we will add each of the categories. Click the + Add New Category button to add the first category Italian. Type Italian into the Name field. Next, you will see Restaurants (0) to the right. Select Strapi Restaurant to add this category to the restaurant.
After selecting, Restaurants (0) to the right, will change to Restaurants (1) (see below). And then press the Save button.
You now see the Category listed. Click the + Add New Category button to add the second category Contemporary.
Now let's add Contemporary. Type Contemporary into the Name field. You will see Restaurants (0) to the right. You will see Restaurants to the right. Select Strapi Restaurant to add this category to the restaurant.
After selecting, Restaurants (0) to the right, will change to Restaurants (1) (see below). And then press the Save button.
You return to the Category Content Type page. You see both categories listed. Both have been assigned to the Restaurant we created earlier.
NOTE
If you want to add Categories directly from the Restaurants Content Type, you simply click on the Restaurant and add, edit or change EXISTING categories. Otherwise, you can create and add new Categories from the Category Content Type as we did above.
# 6. Set roles and permissions
By default, Strapi publishes all Content Types with restricted permissions. Which means you have to explicitly give permissions to each Content Type you create. We are going to give Public (any web browser with the correct link) access to the Restaurant Content Type.
Locate and click on the Roles & Permission menu item under PLUGINS on the left menu. (The Roles & Permission plugin can accomplish many tasks related to permissions. For now we will focus on the Public role.)
Next, click on the pencil edit icon to the right of the Public Role.
From here, scroll down under Permissions and find Restaurant. Click the checkbox next to find. To the right, you will see the URL route. It should say, /restaurants. Scroll back to the top, and click the Save button.
You are returned to the Roles and Permission panel.
# 7. Consume the Content Type API
The project is accessible by following the http://localhost:1337/ link. You will see the 'Welcome' screen.
What we want is the Restaurant Content Type. The route is /restaurants. In your browser, type http://localhost:1337/restaurants.
NOTE
If you have incorrectly or not set permissions to your content type, you will get a '403' permission error. See the below example.
Strapi Slack
Forbidden Access Looks like this:
Strapi Slack Channel
CONGRATULATIONS
👏 Congratulations, you have now completed the Strapi Quick Start. Where to go next?
- Learn how to use Strapi with React (Gatsby or Next.js) or Vue.js (Nuxt.js).
- Read the concepts and articles to deep dive into Strapi.
- Get help on StackOverflow.
- Read the source code, contribute or give a star on GitHub.
- Follow us on Twitter to get the latest news.
- Join the vibrant and active Strapi community on Slack.