Create a Blog with React and Strapi

In this article we will be building a Blog with React.Js , Strapi and Strapi SDK.

When building a complete Blog as a Single Page Application, some of the questions that comes to mind are :

  • How to manage contents at the backend without doing much work as a developer?
  • How to build and manage API for the Blog?

The good news is, there is a headless CMS called Strapi we can use to manage contents and to takes care of the API development

Strapi

Strapi is the most advanced open-source Content Management Framework to build powerful API with no effort built on Nodejs. It is shipped with an admin interface allows creating of contents.

Think of content management in Strapi like a Wordpress backend with an interface where you can create, edit and delete contents.

Reactjs

React.js is an open-source JavaScript library which is used for building user interfaces specifically for single page applications.

We will use it to build the blog interface.

Strapi SDK

Strapi SDK is integrated into Strapi to replace the use of XHR library(like Axios).

So, let get started!

Setup

Strapi API Setup

To setup Strapi, you must have the following installed:

  1. Nodejs (version 9 or higher)
  2. MongoDB, MySQL or PostgreSQL

We will be installing Strapi with npm globally on command line:

npm i strapi@alpha -g

Strapi has been installed globally. We now have access to `strapi` command.

If you have permissions error, you can follow the official npm tutorial or run it with root permission that will ask for the root password. See the command below:

sudo npm install strapi@alpha -g

To check if Strapi installed, copy and paste the command below to your command line:

strapi -v

This should output something like 3.0.0-alpha.x.x.x.

If your output is similar to the one above, you have successfully installed Strapi. Congrats!

Create a Strapi Project

On your command line, follow the instructions below.

strapi new blog-api

This will create blog-api folder and bootstrap a new Strapi project inside it. Change directory to the folder created which is blog-api:

cd blog-api

Then, start the server:

strapi start

The above command will launch the Strapi project and you can see it by typing http://localhost:1337 on the address bar your browser.

If you visit http://localhost:1337/admin you will be ready to create the first user that will manage Strapi which is the ADMIN.

Creating First User

creating first user

Create A Content Type

To create blog posts at the backend using Strapi CMS, we need a content type to create the contents for our blog and to generate the APIs.

Under Plugins Menu, click on Content Type.

Create a Content Type named Blog Post with three fields:

  1. title (type string)
  2. content (type text, tick “Display as a WYSIWYG” in Advanced Setting tab)
  3. author (type relation, many article to one user: “Blog Post has and belongs to one User”)

Then, click on Save button.

Creating Blog Post

We will be inserting contents into the database using the Blog Post content type we created above

  • Visit Blog Post page (which is at the top left corner of your screen)
  • Click on “Add new blog post”
  • Enter values to the Title, Author and Content fields
  • Click on save

Create three more blog posts.

Access Control

For security reasons, API access is, by default, restricted. To allow access, visit the Role and Permissions section under Plugins. Click on Public. Under Public look for Permissions section. In Permission section, click on Application and select find under the Blog Post — and save.

At this point, you should be able to request the list of blog posts.

The author API access is also restricted. Authorize anonymous access by selecting the find (in “Users & Permissions” section) action and save the form.

If you visit http://localhost:1337/blogpost on your browser, you will see the list of blog posts. So we have successfully created our API to read on our blog.

Let move on to the frontend part.

React Setup

We will be using create-react-app to bootstrap our react blog application.

Installing Create React App

On your command line, type the following:

npx create-react-app

(npx comes with npm 5.2+ and higher)

This will bootstrap react setup into blog folder

Change directory to blog directory

cd blog

Launch the app with:

npm start

This will launch the react app. If you visit http://localhost:3000, you will see app running on your browser.

Our react setup is done, now we need to install strapi sdk. To do that, run the following command:

npm install strapi-sdk-javascript

Once the installation is successful, open the project folder in editor of your choice. (I am using Atom). Once you load the project into the IDE, open App.js file, delete all content. Copy and paste the following code to App.js file.

import React from ‘react’;
import Strapi from ‘strapi-sdk-javascript/build/main’;
const strapi = new Strapi(‘http://localhost:1337');class App extends React.Component {
constructor() {
super(props);
state = {
posts: []
}
}
async componentDidMount() {
try {
const posts = await strapi.getEntries(‘blogpost’)
this.setState({ posts });
}
catch(err) {
alert(err);
}
}
render() {
return (
<section>
{this.state.posts.map(post => {
<article>
<div>Title: {post.title}</div>
<div>Content: {post.content}</div></article>
})}
</section>
)
}
}
export default App;

we import Strapi from ‘strapi-sdk-javascript/main/build’

In line 4, we have an instance of our API and set the variable to strapi

You will also noticed in componentDidMount, we added async/await to get the blog entries and set new state.

You could see how easy Strapi is easy to setup and use through Strapi SDK. You can read more on Strapi SDK here and here.

Conclusion

Setting up Strapi with React.js is a lot easier than you think. In the next article, we will be looking at Authentication with React.Js

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade