Strapi<\/a>\u2019s flexibility lies in its customizable nature you can easily create and manage content types, extend its functionality with plugins, and even connect it to any database of your choice. With a user-friendly admin panel, content creators can manage content efficiently, while developers enjoy full control over the project structure and codebase. Whether you\u2019re building a website, a mobile app<\/a>, or an eCommerce<\/a> platform, Strapi<\/a> empowers you to deliver scalable and flexible solutions.<\/p>\n Strapi<\/a> simplifies content management in modern web development with its headless architecture. Here\u2019s why developers love it:<\/p>\n Strapi<\/a> makes managing website or app content simple, even for non-technical users. Its user-friendly admin panel allows content managers, marketers, and business owners to update and organize content without writing any code.<\/p>\n Prerequisites:<\/strong><\/p>\n Before you install Strapi<\/a>, ensure the following tools and technologies are installed on your system:<\/p>\n 1. Node.js:<\/strong> Strapi<\/a> requires a minimum Node.js version to operate. At the time of writing, Node.js version 14 or higher is supported. for future release and support always check the official document (Strapi General Requirement<\/a>) for the latest version requirement.<\/p>\n 2. npm or yarn:<\/strong> Installed alongside Node.js. Use either for package management.<\/p>\n 3. Database:<\/strong> Strapi<\/a> uses SQLite as the default database its a lightweight, file-based database. Strapi<\/a> supports multiple databases, such as SQLite, MongoDB, MySQL, and PostgreSQL. It simplifies the setup process and is ideal for quick development.<\/p>\n Why Use an External Database:<\/strong><\/p>\n Step 1:<\/strong> Install Strapi CMS<\/strong> create-strapi-app:<\/strong> The official tool to generate a new Strapi<\/a> project. Installation Reference Link:<\/strong> –\u00a0Official Documentation<\/a><\/p>\n Here\u2019s a breakdown of the folder structure created by Strapi<\/a>:<\/p>\n Note:<\/strong> Strapi<\/a> uses a cache<\/strong> folder to store temporary data that helps improve performance by reducing the need to re-fetch or recompute certain information. Caching mechanisms can include things like database query results, API responses, or content data that doesn’t change frequently.<\/p>\n Strapi Folder Structure<\/p><\/div>\n Src Folder Structure<\/p><\/div>\n Step 2:<\/strong> Start the Development Server<\/strong> By Default The admin panel is accessible at localhost:1337\/admin<\/strong><\/p>\n Step 3:<\/strong> Create an Admin Account<\/strong> Account Creation<\/p><\/div>\n After creating an admin account you will be redirected to the Strapi<\/a> dashboard –<\/p>\n Strapi Dashboard<\/p><\/div>\n Collection Types<\/strong> in Strapi<\/a> define the structure of your content, similar to tables in a database.<\/p>\n collection types<\/p><\/div>\n Steps to Create Collection Type:<\/strong><\/p>\n 1. Go to the Admin Panel:<\/strong> Navigate to the admin panel and click on “Content-Types Builder<\/strong>“. Strapi Fields<\/p><\/div>\n Here I have added 2 fields for the Event collection-type : Adding Field<\/p><\/div>\n 4. Save:<\/strong> Save the collection, and Strapi<\/a> will automatically create the API endpoints.<\/p>\n Event Page<\/p><\/div>\n Strapi<\/a> provides built-in authentication and authorization features to secure APIs.<\/p>\n Features<\/span>:<\/strong> Example<\/span>: Authentication-Image<\/p><\/div>\n Api-Permission<\/p><\/div>\n An Event collection will generate the following API endpoints as shown in the above image:<\/p>\n 2. Generate JWT:<\/strong> JWT Token<\/p><\/div>\n The response will include a JWT token like the above image.<\/p>\n 3. Use JWT for API Requests:<\/strong> Include the token in the Authorization header:<\/p>\n Once you\u2019ve created your Event collection type and added data, you can use Postman to test and fetch the data via Strapi<\/a>\u2019s API. Follow these steps:<\/p>\n API Response<\/p><\/div>\n As you can see in the above image we have all the event data in json. [GET] \/api\/events\/:id (localhost:1340\/api\/events\/2)<\/strong><\/p>\n API Result By ID<\/p><\/div>\n Strapi<\/a> CMS stands out as a powerful, flexible, and modern solution for building content-rich applications. Its headless architecture, coupled with an intuitive admin interface, makes it ideal for both developers and content managers. With support for REST and GraphQL APIs, customizable content types, and multi-database compatibility, Strapi<\/a> offers unparalleled scalability and versatility. Whether you\u2019re developing a web app, mobile app, or API-driven platform, Strapi<\/a> streamlines your workflow and accelerates development.<\/p>\n","protected":false},"excerpt":{"rendered":" Introduction Strapi CMS is a headless, open-source content management system designed for modern web and mobile applications. Unlike traditional CMS platforms, Strapi is a modern tool where the part that manages content (backend) is separated from the part users see (frontend). This lets developers choose any design or technology for their website or app while […]<\/p>\n","protected":false},"author":1708,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":156},"categories":[5876],"tags":[5084,5439,6901],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/68775"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1708"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=68775"}],"version-history":[{"count":23,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/68775\/revisions"}],"predecessor-version":[{"id":76975,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/68775\/revisions\/76975"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=68775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=68775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=68775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Key Features & Why Do We Need Strapi CMS<\/h3>\n
\n
Easy Content Management with Strapi<\/h3>\n
\n
How to Set Up and Install Strapi CMS<\/h3>\n
node -v # To check Node.js version<\/pre>\n
npm -v # To check npm version\r\nyarn -v # To check yarn version (if installed)<\/pre>\n
\n
\nYou can install Strapi<\/a> using the npx command or manually through npm\/yarn.<\/p>\nnpx create-strapi-app my-project<\/pre>\n
\nmy-project:<\/strong> The folder name for your project.<\/p>\nUnderstanding the Project Structure<\/h3>\n
\n
\n– api\/:<\/strong> Stores auto-generated and custom APIs.
\n– components\/:<\/strong> Defines reusable components for content types.
\n– extensions\/:<\/strong> Contains plugins or customizations.<\/li>\n![\"Strapi](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/12\/Screenshot-from-2024-12-02-14-18-02-1024x396.png\")
![\"Src](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/12\/Screenshot-from-2024-12-02-14-18-19-1024x392.png\")
\nOnce the installation is complete, start the Strapi<\/a> development server:<\/p>\ncd my-project\r\nnpm run develop # This command runs Strapi in development mode, which allows live reloading of changes.<\/pre>\n
\nAfter launching, Strapi<\/a> will prompt you to create an admin account to access the dashboard.
\nFill in all the details and click Let’s Start<\/strong><\/p>\n![\"Account](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Screenshot-from-2024-11-26-19-56-27-1024x583.png\")
![\"Strapi](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Dashboard-1024x483.png\")
What is Collection Types and How to Create It:<\/h2>\n
\n
![\"collection](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/collection-types-1024x421.png\")
\n2. Add a New Collection Type:<\/strong>
\n– Click Create new collection type.
\n– Name the collection (e.g., Event).
\n3. Add Fields: <\/strong>Strapi<\/a> provides many fields like the below image<\/p>\n![\"Strapi](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Screenshot-from-2024-11-26-20-10-02-1024x474.png\")
\n– EventName (Text)
\n– Details (Rich Text)<\/p>\n![\"Adding](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Field-Save-1024x356.png\")
How to Create Page Using Content Manager:<\/h3>\n
\n
![\"Event](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/12\/Strapi-Banner-1024x759.png\")
Authorize Collection To Access The API’s<\/h3>\n
\nJWT (JSON Web Token):<\/strong> Used for secure API interactions.
\nRole-Based Access Control (RBAC):<\/strong> Define roles (e.g., public, authenticated) for accessing resources.<\/p>\n
\n<\/strong>1. Enable Authentication for an API:<\/strong>
\nIn the admin panel, navigate to Settings > Roles<\/strong>.
\nConfigure the permissions for public or authenticated roles.<\/p>\n![\"Authentication-Image\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Authentication-Image-1024x513.png\")
![\"Api-Permission\"](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Api-Permission-image-1024x514.png\")
create<\/strong> => [POST] \/api\/events\r\nfind<\/strong> => [GET] \/api\/events\r\nupdate<\/strong> => [PUT] \/api\/events\/:id\r\ndelete<\/strong> => [DELETE] \/api\/events\/:id\r\nfindOne<\/strong> => [GET] \/api\/events\/:id<\/pre>\n
\nUse the \/auth\/local endpoint to authenticate users:<\/p>\n![\"JWT](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Postman-Auth-Local-Image-1024x593.png\")
POST localhost:1337\/api\/auth\/local\r\n{\r\n\"identifier\": \"<username>\",\r\n\"password\": \"<password>\"\r\n}<\/pre>\nGET localhost:1337\/api\/event\r\nAuthorization: Bearer <JWT_TOKEN><\/pre>\n
How to Fetch Strapi Data as an API<\/h3>\n
\n
![\"API](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Screenshot-from-2024-11-26-19-32-30-1024x626.png\")
\nif you want to fetch only a single entry then we have to pass it by the end of the endpoint like the below –<\/p>\n![\"API](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/11\/Screenshot-from-2024-11-26-19-40-13-1024x626.png\")
<\/h2>\n
Conclusion<\/h3>\n