software development

Building a Modern Blog with React, Strapi and GraphQL Part 01 - Intro and setup

Fayçal BOUHEND | 24 NOV 2019

Introduction

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
  • scalable
  • 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 ?

React is a JavaScript library for building user interfaces. React gives us the ability to logically think about our frontend sites and apps

What is Strapi ?

Strapi is an open source Node.js Headless CMS made to easily build customisable APIs

Setup

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

Installing Dependencies

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 -g parametre.

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.

Preparing React

  • open your terminal and create a new create-react-app project
create-react-app frontend
  • 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

Preparing Strapi

  • 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.

Go to GENERAL > Plugins you'll see a list of pre-installed plugins, you can find more in the Marketplace menu.

Creating the blog post model

Navigate to PLUGINS > Content Type Builder

  • Click the "+ Add Content Type" button.
  • Enter Post and save.
  • Create the title field
    • Click the String field.
    • Type title under the BASE SETTINGS tab, in the Name field.
    • Check Required field and Unique field under the ADVANCED SETTINGS tab.
    • Click Continue.
  • Create the content field
    • Click "+ Add New Field"
    • Click the Rich Text field.
    • Type content under the BASE SETTINGS tab, in the Name field.
    • Click Continue.
  • Click the Save button and wait for Strapi to restart.

Now we see a new menu on the left called Posts, Strapi automatically created the required Javascript files and the database table for the new model

Create your first Post !

Navigate to CONTENT TYPES > Posts

  • Click on + Add New Post button. Type Octodet - Safe, Secure & Stable in the Title field.
  • Type Octodet solutions and services will cover you in terms of information security and visibility into 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.