Developing React + Node websites super-fast using a Headless CMS.

A detailed No-Bullshit guide into Headless CMSes and Strapi, the best of them all.

Pre-requisites: Some experience with Web Development and basic knowledge of OOPs in either Python or JavaScript (The syntax is transferrable).

What we will be building: A Node + React to-list app. Using this knowledge you will be able to build e-Commerce websites, Music Players, Web Apps, Landing pages, Internal team management system, Inventory management etc.

The article is an introduction to a three-part series where I go over the following topics:

1. What is Strapi, How to set up a project and choosing your database (You are here)
2. Creating frontends via React + APIs
3. Deploying to Heroku

What will we be using: Strapi, a node-based Headless CMS, PostgreSQL, ReactJS. Heroku for deployment.

Wait, why PostGre? : Because I love it. You can use whatever you wish.

What is a headless CMS?: A headless CMS is an API based Content Management system. It makes the data accessible via APIs. Because of this, you can host your backend and frontend on two different servers. It helps make your website a tad bit more secure. You can also customize your website using frontend frameworks like React, Vue etc.. The official documentation refers to Gatsby JS. Which is a site creator for React- like Hugo, if you know about it. I prefer using Vanilla ReactJS, it gives me a little more control, but once you understand how to use React with APIs, you’ll be good to go with any framework.

What to download?: Download Node and NPM for your system, there are enough articles on that. Then download PostgreSQL. Remember your password when setting up Postgres.

Let’s get started.

1. Start the PSQL: We will be using the Postgres CLI tool called PSQL to manipulate databases. You can also use PGadmin or any other tool if you prefer GUI. Then you have to enter your values to access the databases. The values in [] are defaults and you should leave it to that right now.Use

2. Now create a database. I will name it strapireact. Remember this.

create database strapireact;

(Don’t forget the semicolon)

Use \list to list all the databases, you should see your database there.

Let’s get into Strapi now. Assuming (and hoping) you have NPM on your system now, run this command:

npm install strapi@alpha -g

You will have strapi’s alpha version installed globally. Let’s go ahead and create a new strapi project. Change directories into your preferred directory and type this

strapi new strapireact 

I have kept the file name the same as the name of the database for convenience, you can do otherwise. You will get a fancy interactive CLI now, choose CUSTOM INSTALLATION. Do not do Quickstart, it will make your database SQLite. Heroku doesn’t even support SQLite. There are certain use cases for SQLite- A production-level website is not one of them. There are websites running SQLite backends, but then there are restaurants selling rotten meat. Do you know what happens to them? Gordon Ramsay absolutely fucks them over. Don’t do that. Migrating databases is easy, but not recommended. Stick to Postgre, Mongo or MySQL. You’ll need these in your system to use them, otherwise, Strapi defaults to SQLite. Abort, repair database you want to use, start from 2 again.

After you select Postgre or anything, you should get this.

Fill up your username and you will have a project.

cd strapireact
yarn develop

Now go over to localhost:1337 (That is usually where Strapi launches server) and then signup. This is your admin user, remember the credentials.

3. Let’s make some content!

Since we are making a to-do list, we will make the content according to that. A ‘content’ is nothing but a model. Create a new content by clicking on Content type builder-

And then clicking on ‘create new content type’.

Now you will get a prompt for the name of content type.

After that, a prompt for the first field will appear. In our case, we will have title and deadline.

Add another field, the deadline.

Make sure you select date here.

And we are done!

Click on Save now. The server will restart and implement the model.

cd api

You will see that a ‘todo’ folder is made.

4. Making the API accessible

Right now, the API will return NULL, on top of that, if you try to access it via any tools, you’ll get a 403 FORBIDDEN. The Public (Unauthenticated user) is not allowed to access the API contents, so head over to ‘Roles and Permissions’ from Admin panel under ‘Plugins’ -

And click on “Public”. Under todo, click find and findone. This will allow user to find your API.

Now go to Todo, and add new Todo. Fill in the details and you’re done!

Now go to http://localhost:1337/todo and viola! You have fetched your API from the browser.

Next Tutorial is on how to serve this using React and then we talk about deploying this. Thanks for reading, leave a clap.