Strapi is a flexible, open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to easily manage and distribute their content. By making the admin panel and API extensible through a plugin system, Strapi enables the world’s largest companies to accelerate content delivery while building beautiful digital experiences.
Why Strapi.io?
Strapi can generate an admin panel in a few clicks and get your whole CMS set up in a few steps.
Strapi’s admin panel gives you an intuitive interface to create, edit and delete your content and automatically creates logic to handle CRUD operations, including filtering and permissions.
It has a built-in user system that allows you to manage users Roles & Permissions
Plugin system & Customization —Every part of your application can be easily customized. Strapi’s architecture allows you to extend your app to match your exact use case and it allows you to install a plugin like GraphQL etc to your application
What’s Strapi tech stack?
To build, deploy, and manage Strapi use the following framework and programming languages.
Let’s Start with using Strapi-CLI
Pre-requirements: Node.js (>v12.x)
1. Create a new project
yarn create strapi-app my-project --quickstart
If you want to use a specific database, you don’t have to use the
--quickstart
flag. The CLI will let you choose the database of your choice.By default,
create-strapi-app
will generate an empty Strapi project. If you want an application that is pre-configured for a specific use case than you can use--template
with template GitHub URL
yarn create strapi-app my-project --template <template-github-url>
2. Start the project
yarn develop
Note: if created with
--quickstart
then it will automatically run your application.
3. Create the first admin user
Navigate to http://localhost:1337/admin
and create a first admin user.
4. Create a Content-Type
- Navigate to
Content-Type Builder
from side pannel under Plugins - Click on
+ Create new collection type
link and create a new collection
- Add one or more than one field for your collection
- Edit
BASE SETTING
andADVANCE SETTING
to add field names and properties. - Click
finish
to update all the fields to collection - and
Save
to save the collection.
5. Add content to your Collection
- Navigate to
<Collection_Name>
from side pannel under COLLECTION TYPES - Click on
+ Add New Restaurant
button to add a new entry.
- Click on
Save
to update the changes.
6. Set Roles and Permissions
- Navigate to
SETTINGS > USERS & PERMISSIONS PLUGIN > ROLES
- Click on
Public Roles
and scroll down to Permissions.
- Change the
Permission
for the collections routes that can access without auth and can update the action for every route fromAdvance Settings
- Change the
USERS-PERMISSIONS
public routes.
Note: Similarly we can update the Roles and Permissions for authenticated routes also.
Add Plugins to your Application
- Navigate to
Marketplace
- Add your required Plugin for the application like
Roles & Permissions
forJWT
authentication, GraphQL, etc.
Note:
Roles & Permissions
are pre-installed if you created with--quickstart
so, you only need to update the roles and permissions from the Setting tab.
Manage Your Media Libray
- Navigate to
Media Libray
- You can add/update/delete your media assets from a single panel.
Additional
We can create Theme
and Components
by using + Create New Single Type
and + Create New Component
in Content-Type Builder
Conclusion
- Here we are! Your collection is accessible at
http://localhost:1337/
- Consume your API with your favorite frameworks, frontend or backend programming languages like React, Vue.js, React Native, Ruby, and many more.
Find the complete example project on Github, and Postman files for Postman Collection and Postman Environment.