Headless CMS, the future of content management systems
We have all used, or at least heard of a traditional CMS, Wordpress for instance is still the most used CMS today, it's easy to setup, intuitive, and customisable, it combines the content-administration and the view layer of a website. that said, serving content via a channel other than a browser is where a traditional CMS will struggle, and force-fitting it (Wordpress API with a mobile app for instance) will be time consuming.
to keep up with the modern web and the whole ecosystem of content-consuming endpoints ( mobile applications, Single page Apps, Progressive Web Apps, cloud services, APIs ... ), content must be available to all this channels with secure front-end agnostic APIs, and that's where a headless CMS really shines, Strapi is a NodeJS based headless CMS, a content-only data source, meaning it has no front-end layer "head", content are served via a fully customisable and secure API to be integrated with whatever frontend you'll need, for this project we will work with React, it has many advantages :
- maintained by facebook
- easy to learn and easy to use (boilerplates and professional starter kits)
- fast page rendering by using the virtual DOM
- comes with a helpful developer toolset (browser extensions, strong community)
- used by both Fortune 500 companies and innovative startups
by combining these two technologies, we are going to build a modern full-stack web application.
What is React ?
What is Strapi ?
Strapi is an open source Node.js Headless CMS made to easily build customisable APIs
First let's start by preparing our development environment, we need NodeJS >= 10.x with npm >= 6.x. You can download NodeJS from the official website https://nodejs.org
Now we can install our dependencies using npm package manager, let's start with Strapi
npm install strapi@beta -g
at the time of this tutorial Strapi is in Beta, notice we are installing Strapi globally using
For React, we will use create-react-app boilerplate
npm install create-react-app -g
The create-react-app is an officially supported way to create React applications.
- open your terminal and create a new create-react-app project
- Upon completion, you will get some quick tips on how to use the application
- to start the development server run the following
cd frontend npm start
- open your terminal and create a new Strapi project
strapi new backend --quickstart
- wait for it to complete then Navigate to http://localhost:1337/admin
- Complete the form to create the first Administrator user.
- Click Ready to start.
Strapi is a content management system like Wordpress, yet it is very different.
GENERAL > Plugins you'll see a list of pre-installed plugins, you can find more in the
Creating the blog post model
PLUGINS > Content Type Builder
- Click the "+ Add Content Type" button.
- Create the title field
- Click the String field.
titleunder the BASE SETTINGS tab, in the Name field.
Unique fieldunder the ADVANCED SETTINGS tab.
- Click Continue.
- Create the content field
- Click "+ Add New Field"
- Click the Rich Text field.
contentunder the BASE SETTINGS tab, in the Name field.
- Click Continue.
- Click the Save button and wait for Strapi to restart.
Create your first Post !
CONTENT TYPES > Posts
- Click on + Add New Post button. Type
Octodet - Safe, Secure & Stablein the Title field.
Octodet solutions and services will cover you in terms of information security and visibilityinto the Content field.
- Click Save.
- You will see a new entry in the post list.
Test strapi Api
- navigate to
PLUGINS > Roles & Permissions
- edit the Public role.
- find your content type post under
Permissions > APPLICATION
- check the find and findOne permissions to allow public ( non authenticated ) users to consume your api.
- scroll up un click save.
- open a new browser tab and navigate to http://localhost/posts
- it works ! you will see all the posts returned in json format
In the next part we will install the graphql plugin in strapi, and use React Apollo to connect it with the front end of the blog.