Setting Up A RESTful API Website With Contentful In 3 Minutes

Arisa F
5 min readMay 2, 2019

Hi there, it’s Arisa, a freelance Frontend & Full Stack Developer living in Germany.

Let me start by asking you one question.

“Do you still use Wordpress or any CMS for your projects?”

I’ve been using Wordpress for a few years.
One of my Japanese blogs is also Wordpress.

Still, about 30% of the webs in this world are built with Wordpress.
But as a developer, I’ve been feeling Wordpress is not efficient and too many things to keep in our minds to maintain and to develop.

Or even CMS itself is not neat to develop for developers.
No one likes slow websites to load pages and complicated inefficient structures.

It took my interests away from me to work on some of the projects just because I feel Wordpress projects are inefficient and not allow me to develop my career.

Anyway, webs are no longer websites, and apps are no longer apps.
JAMStack blew our minds that webs and apps are web apps.
Headless with RESTful API also is one of the new ways to develop a website as well.

These more efficient and speedy structures are way more attractive to work on.
Also, if you’re familiar with Gatsby.js, this is something for you.

Let’s play around a bit to get to know Contentful.

Signup

First, signup before you start.

Anyway, you’ll be asked to signup to a new account or sign in to your existing account later.

https://www.contentful.com/

Install Contentful CLI

Before you install Contentful CLI, you should make sure that you have installed Node.js.

You can reach the way to install Node.js on Node.js website.

If you’re sure you have Node.js, then install Contentful CLI.
This guy works well for you to play around Contentful.

$ npm install -g contentful-cli

Run the guide

Hit this command to run the guide.

$ contentful guide

You’ll see Contentful guide on your terminal/Power Shell.

Contentful tells you that you need to get CMA token to authenticate and paste in your terminal / Power Shell.

Hit Y or Yes then it’ll direct you to the browser page like this.

Choose “Authorize.”
You will be redirected to the token page.
Copy your CMA token in there.

And paste it into your terminal /Power Shell, super simple.

Create your space

Next thing, you’ll create your new space as it shows.
Hit Y or Yes.

They will alert you that it might cost depends on your subscription.
The first space is free.
If you are going to create the first space, or aware of your subscription, hit Y or Yes again.

Set up your content model to populate your space with content entries and assets

At this moment, you can imagine you got a space to live in a flat but you don’t have any furniture to start your life in there.

Naturally, you’ll buy some furniture to make your life in your flat comfortable.

Same thing at this process.
You got your space but there’s nothing in.
So, you put contents, like entries and assets.
Type Y or Yes to do so.

Clone Starter Gatsby Blog repository

In here, you’ll clone a repository.
This process makes your work way less and easy to set up a basic structure.

Then name your repository.

Choose the directory in your machine.

That’s it!
It only took 3 minutes to set up a headless RESTful API website without CMS.

To run and see your project, remember it’s based on Gatsby.js.
It means you just hit the same command when you develop a Gatsby.js project.

$ gatsby develop

Or actually, it shows you just hit Y or Yes to run the same command.

You should see your new project on your browser.

Contentful also has a dashboard like any other CMS.
You can try out changing images and text contents from there.
But of course, you can arrange as you like in code.

Take some time to finish developing your project.
After finishing your project, Contentful provides you a great feature to deploy your website into either Netlify or Heroku.

In the dashboard, right after you set up your project, it shows you “select hosting service” but obviously, you’re not yet even edit a bit.
I don’t think it’s clever to deploy already before you finish developing your project.
Just hit “Skip.”

You’ll see the rest of the process to deploy can be continued from the choice you see in your dashboard.

Deploy

First, you should install Netlify CLI.
Just Google the page to install.
It’s not that difficult to reach.

Then follow these commands.

$ netlifyctl login$ npm run build$ netlifyctl deploy -b public

Netlify confirms you that you are going to create a new site.
Select Yes.

That’s all you needed to do.
I’m sure you’ll love modern web technology like Contentful if you love efficiency for development and speedy websites.

You also can check Contentful official tutorial from here.

I added a bit more images on each process than the official tutorial page but you should see other documents from Contentful to fully understand what they provide us great features.

Hope this entry helped you.

Tschüß.

--

--