Strapi Headless CMS - Flexible and Developer-Friendly Solution

Strapi (Headless CMS) 2020-03-15

Content - Headless CMS - What is Strapi? - Features - Getting Started - Configuration - Concenpts

1. Headless CMS A Headless CMS is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via a RESTful API for display on any device. The term headless comes from the concept of chopping the head (the front end, i.e. the website) off the body (the back end, i.e. the content repository). A headless CMS remains with an interface to add content and a RESTful API (JSON, XML) to deliver content wherever you need it.

2. What is Strapi? Strapi, the most flexible open-source Headless CMS gives developers the freedom to use their favorite tools and frameworks while helping editors to easily manage their content and distribute anywhere. By making the admin panel and API easily customizable and extensible through a plugin system, Strapi enables the world s largest companies to accelerate content delivery while building better digital experiences.

3. Features Custom content structure With the admin panel of Strapi, we can generate the admin panel in just a few clicks, and get whole CMS setup in a few minutes. Manage content The Strapi's admin panel gives an intuitive interface to create edit and delete content.

Developer-friendly API Strapi provide an API that match our need. Fetch the data we want via a REST API or via the GraphQL endpoint. Roles & Permissions A User system is built in Strapi, that let us manage how can access to what. It provides secure and authorize access to our API with JWT or providers. Front-end agnostic We can connect to any client including React, Gatsby, Nuxt through the JavaScript SDK.

Plug and Play databases With SQLite, MongoDB, MySQL, Postgres support, we can decide if we need relational or non-relational database. Customization We can customize every single piece of the application. The architecture of Strapi let you customize your app to match your exact needs. Built-in Emailing By default, a SMTP server is installed on every generated project.

File upload By default, file upload functionality is installed. We can upload of any kinds of files on our server or external providers like AWS S3, Cloudfare, Cloudinary and more. Auto-generated documentation We can write and maintain the documentation with a one- click integration. Multi language By default, multi language is enabled for every generated project.

4. Getting Started Install Strapi and Create a new project - yarn yarn create strapi-app my-project --quickstart - npx npx create-strapi-app my-project --quickstart Create an Administrator user Navigate to http://localhost:1337/admin. Complete the form and create the first Administrator user.

5. Configuration Main configurations relative to project Path: ./config/application.json { "favicon": { "path": "favicon.ico", "maxAge": 86400000 }, "public": { "path": "./public", "maxAge": 60000 } }

Custom configuration Add custom configurations to the project. The content of this file is available through the strapi.config object. Path: ./config/custom.json { "backendURL": "http://www.strapi.io", "mainColor": "blue" } Functions The ./config/functions/ folder contains a set of JavaScript files in order to add dynamic and logic based configurations.

CRON tasks Make sure the enabled cron config is set to true in ./config/environments/**/server.json file. To define a CRON job, add your logic like below: Path: ./config/functions/cron.js module.exports = { */10 * * * * * : () => { // Add logic } }

Database Path ./config/environments/**/database.json { "defaultConnection": "default", "connections": { "default": { "connector": "bookshelf", "settings": { "client": "postgres", "host": "localhost", "port": 5432, "username": "${process.env.USERNAME}", "password": "${process.env.PASSWORD}", "database": "strapi", "schema": "public" }, "options": { "debug": true } } } }

Environments Most of the application's configurations are defined by environment. It means that you can specify settings for each environment (development, production, test, etc.). You can access the config of the current environment through strapi.config.currentEnvironment. Request & Response Path ./config/environments/**/request.json Path ./config/environments/**/response.json

6. Concepts Routing Models Policies Middlewares Controllers Services Hooks Webhooks

Routing Path: ./api/**/config/routes.json { "routes": [ { "method": "GET", "path": "/restaurants", "handler": "Restaurant.find", "config": { "policies": [], } }, { "method": ["POST", "PUT"], "path": "/restaurants/:id", "handler": "Restaurant.createOrUpdate", "config": { policies": ["isAuthenticated", "hasCreditCard"], } } ] }

Controllers Path: ./api/**/controllers/ const { sanitizeEntity } = require('strapi-utils'); module.exports = { async find(ctx) { let entities; if (ctx.query._q) { entities = await strapi.services.restaurant.search(ctx.query); } else { entities = await strapi.services.restaurant.find(ctx.query); } return entities.map(entity => sanitizeEntity(entity, { model: strapi.models.restaurant }) ); }, };

Models Path: ./api/restaurant/models/Restaurant.settings.json { "connection": default", "info": { "name": restaurant", "description": This represents Restaurant Model." }, "attributes": { "cover": { "collection": "file", "via": "related", "plugin": "upload" }, "name": { "default": "", "type": "string" } } ] }

THANK YOU