Welcome to CodeCrew Infotech
Unlocking the Power of Strapi: Building Scalable Content Solutions with Ease
What is Strapi :-
Strapi is an open-source headless Content Management System (CMS) that allows you to create, manage, and distribute digital content. It provides an easy-to-use interface for content creators to manage their content without needing to have technical expertise.
Key Features of Strapi :-
Headless CMS :- Strapi follows the headless CMS architecture, separating the backend (content management) from the frontend (presentation layer). This allows for greater flexibility in delivering content across various platforms and devices.
Customizable Content Types :- With Strapi, you can define custom content types according to your specific needs. Whether it's articles, blog posts, products, or any other type of content, you have full control over the structure and fields.
RESTful API :- Strapi automatically generates a RESTful API for your content, making it easy to retrieve and manipulate data from your applications or websites.
GraphQL Support :- In addition to REST, Strapi also supports GraphQL, a query language for APIs, providing an alternative way to interact with your data.
User Management :- Strapi includes built-in user authentication and role-based access control (RBAC), allowing you to manage user accounts and permissions efficiently.
Extensible :- Strapi is highly extensible, with a plugin system that enables you to add custom functionality and integrations as needed.
Developer-Friendly :- Developers appreciate Strapi's use of modern technologies like Node.js, Express, and MongoDB, as well as its well-documented API and plugin ecosystem.
Use Cases for Strapi :-
Websites and Blogs: Strapi can power the backend of websites and blogs, allowing content creators to easily publish and manage their articles and posts.
Mobile Apps: Strapi's RESTful API or GraphQL support makes it an excellent choice for providing content to mobile applications, enabling seamless integration with iOS, Android, or hybrid apps.
E-commerce Platforms: Strapi can be used as the backend for e-commerce platforms, providing a flexible solution for managing product catalogs, orders, and customer data.
IoT Applications: With its ability to handle various data types and its extensibility, Strapi can also be used as a backend for Internet of Things (IoT) applications, managing sensor data, user interactions, and more.
How to start Strapi :-
Prerequisites :-
Make sure you have Node.js installed on your machine. You can download it from the official
https://nodejs.org/en/download
https://nodejs.org/en/download
Install Strapi CLI :-
Open your terminal or command prompt and install the Strapi CLI globally by running the following command:
|
npm install -g strapi@beta
|
Create a New Strapi Project :-
Navigate to the directory where you want to create your Strapi project, then run the following command to create a new project:
|
npx create-strapi-app@latest my-project
|
Setup your Project :-
Once the project is created, navigate into the project directory:
| cd my-project |
Next, start the Strapi server by running:
| npm run develop |
This will start the Strapi server locally. After a few moments, you should see a message indicating that the server is running and listening for requests.
Access Strapi Admin Panel :-
Once the server is running, open your web browser and go to http://localhost:1337/admin. This will take you to the Strapi admin panel.
On the first visit, you'll be prompted to create an admin account. Fill in the required details to create your admin account.
Start Using Strapi :-
After logging in, you'll have access to the Strapi admin dashboard where you can create content types, define fields, and start adding content to your project.
Part A: Create a new project with Strapi :-
Step 1: Run the installation script :-
| npx create-strapi-app@latest my-project --quickstart |
Once the installation is complete, your browser automatically opens a new tab.
By completing the form, you create your own account. Once done, you become the first administrator user of this Strapi application. Welcome aboard, commander!
Part B: Build your data structure with the Content-type Builder
Step 1: Create a "Restaurant" collection type
Click on the Create your first Content type button.
If it's not showing up, go to Content-type Builder in the main navigation.
Click on Create new collection type.
Type Restaurant for the Display name, and click Continue.
Click the Text field.
Type Name in the Name field.
Switch to the Advanced Settings tab, and check the Required field and the Unique field settings.
Click on Add another field.
Choose the Rich text (Blocks) field in the list.
Type Description under the Name field, then click Finish.
Finally, click Save and wait for Strapi to restart.
Go to Content-type Builder in the main navigation.
Click on Create new collection type.
Type Category for the Display name, and click Continue.
Click the Text field.
Type Name in the Name field.
Switch to the Advanced Settings tab, and check the Required field and the Unique field settings.
Click on Add another field.
Choose the Relation field.
In the center, select the icon that represents "many-to-many". The text should read Categories has and belongs to many Restaurants.
Finally, click Finish, then the Save button, and wait for Strapi to restart.
Part C: Deploy to Strapi Cloud
Step 1: Host the code of your Strapi project on GitHub
In the terminal, ensure you are still in the my-project folder that hosts the Strapi project we created. If you followed this tutorial closely so far, we should still be there.
Run the git init command to initialize git for this folder.
Run the git add . command to add all modified files to the git index.
Run the git commit -m "Initial commit" command to create a commit with all the added changes.
Login into your GitHub account and create a new repository. Give the new repository a name, for instance my-first-strapi-project, and remember this name.
Go back to the terminal and push your local repository to GitHub:
a. Run a command similar to the following: git remote add origin
git@github.com:yourname/my-first-strapi-project.git, ensuring you replace
yourname by your actual GitHub profile name, and my-first-strapi-project by
the name you used at step
b. Run the git push --set-upstream origin main command to finally push the
commit to your GitHub repository.
Step 2: Create a Strapi Cloud account and a new Strapi Cloud project
Navigate to the Strapi Cloud login page.
Click the Continue with GitHub button and log in with the GitHub account where your Strapi project's repository is hosted.
You should now see the Strapi Cloud dashboard. This is where you manage your Strapi projects hosted on Strapi Cloud.
1. Click the + Create project button.
2. Select the free trial plan.
3. Scroll down, and in the "Import git repository section", choose the appropriate Account and Repository from the list (for instance, Account: yourname, Repository: my-first-strapi-project).
4. Scroll down further, and in the "Setup" section, give your project a Display name (for instance my-first-strapi-project) and leave the other options unchanged.
5. Click Create project at the bottom of the page.
Part D: Add content to your Strapi Cloud project with the Content Manager
Step 1: Log in to the admin panel of your new Strapi Cloud project
Now that your Strapi Cloud project is created, let's log in into the project:
From your Strapi Cloud dashboard, click the my-first-strapi-project project.
Click the Visit app button.
In the new page that opens, complete the form to create the first administrator user of this Strapi Cloud project.
Step 2: Create an entry for the "Restaurant" collection type
Go to Content Manager icon Content Manager > Collection types - Restaurant in the navigation.
Click on Create new entry.
Type the name of your favorite local restaurant in the Name field. Let's say it's Biscotte Restaurant.
In the Description field, write a few words about it. If you're lacking some inspiration, you can use Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.
Click Save.
Step 3: Add Categories
Click on Create new entry.
Type French Food in the Name field
Click Save.
Go back to Collection types - Category, then click again on Create new entry.
Type Brunch in the Name field, then click Save.
Now, we will add a category to a restaurant
1) Go to Content Manager icon Content Manager > Collection types - Restaurant in the navigation, and click on "Biscotte Restaurant".
2) In the Categories drop-down list at the bottom of the page, select "Brunch". Scroll back to the top of the page and click Save.
Step 4: Set Roles & Permissions
We have just added a restaurant and 2 categories. We now have enough content to consume (pun intended). But first, we need to make sure that the content is publicly accessible through the API:
Click on Settings icon Settings at the bottom of the main navigation.
Under Users & Permissions Plugin, choose Roles
Click the Public role.
Scroll down under Permissions.
In the Permissions tab, find Restaurant and click on it.
Click the checkboxes next to find and findOne.
Repeat with Category: click the checkboxes next to find and findOne.
Finally, click Save.
Step 5: Publish the content
By default, any content you create is saved as a draft. Let's publish our categories and restaurant.
Click the "Brunch" entry.
On the next screen, click Publish.
In the Confirmation window, click Yes, publish.
Then, go back to the Categories list and repeat for the "French Food" category.
Finally, to publish your favorite restaurant, go to Content Manager icon Content Manager > Collection types - Restaurant, click the "Biscotte Restaurant" entry, and Publish it.
Step 6: Use the API
There you are: the list of restaurants should be accessible by visting the /api/restaurants path of your Strapi Cloud project URL (e.g., https://beautiful-first-strapi-project.strapiapp.com/api/restaurants).
|
{ "data": [ { "id": 1, "attributes": { "name": "Biscotte Restaurant", "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.", "createdAt": "2021-11-18T13:34:53.885Z", "updatedAt": "2021-11-18T13:59:05.035Z", "publishedAt": "2021-11-18T13:59:05.033Z" } } ], "meta": { "pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 1 } } } |
REST API Filtering
Strapi provides a comprehensive REST API that allows you to interact with your content using standard HTTP methods such as GET, POST, PUT, and DELETE.
There are few steps to create a route and controller:
Go to your Strapi admin panel You need to access the Strapi admin panel, which is usually available at http://localhost:1337/admin when running Strapi locally.
Click on Content-Type Builder and then create a new collection type In the Strapi admin panel, navigate to the "Content-Type Builder" plugin. This is where you can manage your Content Types (models/collections). Click on the "Create new collection type" button to start creating a new collection.
Type display name and API ID (Singular) When creating a new collection type, you'll be prompted to enter the following information:
Display Name: This is the human-readable name for your collection type (e.g., "Article", "Product", "User").
API ID (Singular): This is the machine-readable identifier for your collection type in singular form (e.g., "article", "product", "user"). This will be used to generate the API routes and database table/collection name.
By following these steps, Strapi will automatically:
Create a database table/collection based on the API ID (Singular) you provided.
Generate API routes and endpoints for interacting with this collection type using the REST API (e.g., /articles, /articles/:id, etc.).
Allow you to define fields (attributes) for your collection type, such as text, number, date, relation, etc.
Sort
Queries can accept a sort parameter that allows sorting on one or multiple fields with the following syntaxes:
GET /api/:pluralApiId?sort=value to sort on 1 field
GET /api/:pluralApiId?sort[0]=value1&sort[1]=value2 to sort on multiple fields (e.g. on 2 fields)
Filtering
Strapi's REST API allows you to filter the content you retrieve based on various criteria. You can use query parameters in your API requests to filter the data. Some common filtering options include:
Example:
1) Find users having 'John' as a first name
You can use the $eq filter operator to find an exact match.
| GET /api/users?filters[username][$eq]=John |
2) Find multiple restaurants with ids 3, 6,8
| GET /api/restaurants?filters[id][$in][0]=3&filters[id][$in][1]=6&filters[id][$in][2]=8 |
You may also like
