Strapi + gatsby
Strapi + gatsby

Strapi is a headless CMS use for creating API in node js through admin panel that anyone can use it. It has built-in content type system that helps to build APIs in no time that can be consumed by Front end Frameworks like React, Vue, Next, Angular, etc using GraphQL and REST. Let’s not explain the Strapi here in detail as I have already discussed in previous articles.

Are you ready to build Blog with Gatsby and Strapi? Yes? Then Let’s start.

Create a project in Strapi

Let’s start by creating a project in Strapi. I am hoping that you have already installed Strapi, if not you can check out my this article to install and create a project in Strapi. Run the following command to create a project.

 yarn create strapi-app my-blog --quickstart

Now navigate to http://localhost:1337/admin/auth/register

  • Now create admin user by filling the form.
  • Once the form is filled click on Ready to start button.
Strapi cms admin registration form

Create content type

From the left-hand menu click Content Type Builder under PLUGINS.

  • From the configurations provide the Display name let’s say “Posts”
  • We have to add fields to our content type
content type in strapi

Our Content type Posts can have three fields.

  • title (type String)
  • content (type text)
  • image (type media)

While creating a field you set a default value,  can mark it as private, required, unique,  max and min length from the advance settings tab.

While creating a field you set a default value,  can mark it as private, required, unique,  max and min length from the advance settings tab.

Once all the fields and settings are done click on the Save button to save your content type. Strapi will automatically restart the server.

Now it’s time to fill your content type with data.

Must Read: React Developer Salary

Fill content with data.

Great. Let’s begin the magic, now you have successfully added your first content type but it’s still empty.  It’s time to add some data to it. 
From the left-hand menu, you will notice a new content type under Content Types with name Posts. Click on that and start adding some new posts in it. You will notice a new field Id, Strapi automatically generates this field to give a unique Id to each post.

Follow these steps to fill your content with data.

  1. Click on Add New Post  Button to create news through admin panel
  2. Add Title, Content, and Image
  3. Hit save button

Ok great! Congratulations you have added your first post.

Time to test our API

Ok, let’s test our API, head over to browser and type http://localhost:1337/news (news is our content type). You will see a Forbidden error with a 403 status code.

strapi 403 forbidden error

Basically, we need to allow permissions to our posts content type. From left panel click on roll and permissions and then click Public.  If you scroll down you will see a Permissions section, from there you have to select find checkbox.
All done, now navigate again to http://localhost:1337/posts

content available

That’s it. Now we just need a front end framework to display our posts and for that, we will use gatsby.

What is Gatsby?

Gatsby is a modern front end React framework used as a static site generator. It’s very popular in terms of speed as it only loads static files. Gatsby can also be used as a Progressive web app (PWA) and can be use as Server-Side Rendering.

I will not discuss Gatsby here in detail as it’s totally out of scope for this tutorial.

Let’s start by creating a project in Gatsby. Fort that runs the following command in cmd.
I am assuming that you have already installed gatsby on your machine.  

gatsby new my-blog
cd my-blog

Start your development server

gatsby develop

Gatsby will start a hot reloading development environment server at localhost:8000

Be default gatsby will load a starter template, but we don’t need that, so let’s do some code cleaning.

Open your code in a code editor, I am using Visual Studio Code you can use any other of your choice.

Let’s start by Changing this gatsby Default Starter to my blog. For that navigate to components > layout.js and change default props for the Header component to “My Blog”. Your layout.js will look like this.

import React from "react"
import PropTypes from "prop-types"

import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {

  return (
    <>
      <Header siteTitle={"My Blog"} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Now we need to edit our index.js file for that navigate to src > pages > index.js and remove all lines of code between <Layout></Layout> tag and code a heading to welcome users.

Our index.js file will look like this.

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <h1>Welcome to my blog</h1>
  </Layout>
)

export default IndexPage

We will use graphQL to fetch data in our application.

What is graphQL?

GraphQL is a query language for APIs created by Facebook. It allows clients the power to get what exactly they need. It is really helpful in terms of speed as it only fetches data that is required instead of a complete JSON object.

Let’s start.

Before moving further we need to install a plugin called gatsby-source-strapi.
npm i gatsby-source-strapi

Alright, let’s go ahead and construct out graphQL query.

Let’s import graphql from gatsby

import {  graphql } from "gatsby"

Now Let’s write our first query
Here is the code for our first query

Once successfully installed we need to configure a few things and add some our plugin configuration in gatsby-config.js

gatsby source file

Here apiURL is our URL from where we want to fetch data.
contentTypes: contentTypes is an array of the content that we have created in our strapi backend like posts etc
queryLimit: it is used to limit the number of rows returned by our query

Now let’s go to the graphql interface to test our API. Head over to http://localhost:8000/___graphql and test this in the same way.

So we got the id, title, and content.

Fetch post title

Now let’s start displaying our data into the homepage. First, we will fetch the title from our posts. For that, we will use a map function and a list operator.

const IndexPage = ({data}) => (
  <Layout>
    <h1>Welcome to my blog</h1>
    <br />
    <ul>
      {data.allStrapiPosts.edges.map(document => (
        <li>
          <h2>{document.node.title}</h2>
        </li>
      ))}
    </ul>
  </Layout>
)

After fetching the title we will fetch description and will display it accordingly. We will modify the above code like this.

const IndexPage = ({data}) => (
  <Layout>
    <h1>Welcome to my blog</h1>
    <br />
    <ul>
      {data.allStrapiPosts.edges.map(document => (
        <li>
          <h2>{document.node.title}</h2>
          <p>{document.node.content}</p>
        </li>
      ))}
    </ul>
  </Layout>
)

Great! Now you have learned how to create posts in the backend and display them using gatsby and graphql.

Now let’s deploy strapi app on Heroku

Deployment is the last and most important step that makes your app accessible and used by the customers. There are many options available that can be used for deployment like AWS, Digital Ocean, Microsoft Azure, Heroku, etc. In this article, we will check and discuss how can we deploy our Strapi app on Heroku.
Heroku is a cloud-based service that lets us deploy, manage and scale our web and mobile apps.

Deploying strapi app on Heroku.

The aim of this tutorial is to provide the necessary steps that can be followed for the deployment.

Prerequisite

  • Node and npm installed
  • An existing strapi app
  • Git installed and set up locally
  • A free Heroku account.
  • Heroku cli (To check if it is successfully installed type heroku -v in CMD)

How to initialize project to git.

  1. Login to Heroku Account from CLI

    Now you have to login to your Heroku account from CLI for that run this command.
    heroku login
    This command will open heroku login page in your browser. Enter your login credentials. On successful login return to your heroku cli.

  2. Update .gitignore file

    Add package-lock.json at the end of .gitignore file

  3. Deploying your strapi app

    Initialize your project to git repo using the following command

git init
git add .
git commit -m "initial commit"

Let’s create a project in Heroku

Now turn back to heroku cli and create project using command

heroku create

It will create a project with a random name in your heroku account. We can change our application name whenever we want but for now, let’s proceed with the randomly generated name. In my case it is https://vast-temple-69448

To create a project of your desire type

heroku create your-project-name

Now push all your changes to the server. For that run command

git push heroku master

Now open a live application

To test the app in browser type this command from project directory in CMD

heroku open

It will open your strapi app in the browser.

How to check logs of your application?

There are two ways to check the logs of your application.

  1. You can check through your heroku account
  2. You can check from CMD
  1. To check logs through heroku account, open your account navigate towards your project directory. From the top right corner click on More Option, it will open a drop-down and from there click on open logs
  2. To check logs through CMD run this command
heroku logs

In this article, we have learned how to create a blog and then deploy our strapi app to heroku. If you want to learn how to connect MongoDB or MongoDB atlas with strapi then please check my previous article.

You can also check my other articles on strapi.

Connect the AWS S3 bucket with strapi for storing data.

Create content types and fetch data through API in strapi.

Install and create a project in Strapi?

LEAVE A REPLY

Please enter your comment!
Please enter your name here