Strapi Headless CMS & Gatsby

The FASTEST, EASIEST way to get going as of January 2021

I was trying to discover the fastest way to build nodejs/react applications with a database backend and quickly fell in love with the Jamstack architecture.

• Ghost CMS— beautiful, simple & fast, but I could not easily add custom fields.
• Firebase, Contentful, Sanity, Netlify — all amazing options, but I did not want to be locked into a proprietary vendor solution.
• Strapi — open Source headless CMS solution that supports PostgreSQL, MongoDB, SQLite, MySQL, and MariaDB.

I decided to experiment with Strapi on top of PostgreSQL as my backend, and I wanted to create a blog using Gatsby, a static site generator, as my frontend.

I spent days testing and compiling different methods for deploying my Strapi backend and Gatsby frontend. Here is the FASTEST, EASIEST way to get going started.

Tip: Keep the frontend and backend folders separate and create a github repository for each. The secret sauce is setting up everything locally and pushing to github.

Frontend — Gatsby

To give me a head start, I purchased ($29) FlexiBlog — React Gatsby Multipurpose Blog Theme and worked with the lead developer on creating a Strapi version.

Demo | Documentation

Quick Steps:
On your local computer, create “flexiblog-strapi-frontend” folder and paste the “@elegantstack” folder inside.

Run the following commands

cd flexiblog-strapi-frontend
cd @elegantstack
gatsby new site ./starters/gatsby-starter-flexiblog-personal

Run the development site locally.

yarn clean
yarn develop

It is running using local json files instead of a database. You can change it to use the database once you setup Strapi as your backend.

Backend

To create a local Strapi instance with all the tables seeded, you need to use the quickstart template from ElegantStack.

Create a “flexiblog-strapi-backend” folder

cd flexiblog-strapi-backend
yarn create strapi-app backend -quickstart -template https://github.com/ElegantStack/strapi-template-blog

Follow the instructions to connect the Flexiblog Gatsby frontend to the backend.

Note: The quickstart creates a SQLite version of the backend database which is fine for testing locally. You don’t need to run PostgreSQL locally.

Deploying Backend to the Cloud

At this point, you should have everything running beautifully locally.

• Strapi Backend- http://localhost:1337
• Gatsby Frontend- http://localhost:8000

Create two GitHub repositories, one for the frontend and one for your backend, and push your code.

Now you have to decide where you want to host Strapi. Your best options are Digital Ocean’s new App Platform or Heroku.

To set up your local strapi instance for deploying to the cloud, in your “config” folder, create a subfolder “env” and inside that folder, create another subfolder “production.”

File Structure: flexiblog-strapi-backend
-config
— env
— — production
— — — database.js
— — — server.js

Create a database.js file

module.exports = ({ env }) => ({
  defaultConnection: "default",
  connections: {
    default: {
      connector: "bookshelf",
      settings: {
        client: "postgres",
        host: env('DATABASE_HOST'),
        port: env('DATABASE_PORT'),
        database: env('DATABASE_NAME'),
        username: env('DATABASE_USERNAME'),
        password: env('DATABASE_PASSWORD'),
        ssl: {
          rejectUnauthorized: false,
        },
      },
      options: {},
    },
  },
});

and a server.js file

module.exports = ({ env }) => ({
  url: env("STRAPI_URL"),
  port: env.int("PORT", 1337),
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET', '9ccc4b518533afc1e1a9a154d5c6f37a'),
    },
  },
});

Note: How to define the JWT Secret

Install the PostgreSQL connection packages

yarn add pg
yarn add pg-connection-string

Remember your original data is in a Strapi SQLite on your local quick start instance so you will see no data on your PostgreSQL database. You will have to migrate the data or start fresh.

Digital Ocean

You will see a one-click install option that will create a $10 droplet with Strapi and PostgreSQL installed. This is a great option EXCEPT you have to figure out:

• how to connect it to your GitHub and configure continuous deployment
• how to get all your locally seeded data into the PostgreSQL database
• how to change it from a strapi development instance to production
• how to set up an SSL certificate

Instead, I recommend doing the Digital Ocean’s new App Platform
Getting Started Costs: $10/mo for the app and $7/mo for the dev database

Video — Building Fullstack Web Applications on Digital Ocean App Platform
Code — https://github.com/do-community/blog-strapi

In digital ocean, once you connect to your backend repository, you will need to create several environment variables:

• STRAPI_URL | ${APP_URL}/api
• NODE_ENV | “production”
• DATABASE_URL | ${db.DATABASE_URL}
• DATABASE_HOST | ${db.HOSTNAME}
• DATABASE_PORT | ${db.PORT}
• DATABASE_NAME | ${db.DATABASE}
• DATABASE_USERNAME | ${db.USERNAME}
• DATABASE_PASSWORD | ${db.PASSWORD}

And you will have to update your Build Command to include production
NODE_ENV=production yarn build

Heroku

Heroku is free EXCEPT your instance goes to sleep every 30 mins and takes 10 seconds to wake up when you access it. Since you are using a static site generator for the front-end, if the backend falls asleep, that’s okay because your site still runs.

Heroku also has lots of one-click installation options. However, I still find that deploying from your GitHub repository is best so you can continue to test locally and have a continuous deployment pipeline.

You can use the SAME repository for deploying to Heroku as you did for Digital Ocean. The difference is you will have different environment variable values inside Heroku.

When you create a PostgreSQL database as an “add-on” in Heroku, it will automatically populate the DATABASE_URL environment variable you need to parse into individual variables.

DATABASE_URL: postgres://DATABASE_USERNAME:DATABASE_PASSWORD@DATABASE_HOST:DATABASE_PORT/DATABASE_NAME

Now add these additional variables by parsing them from your database url:

• DATABASE_USERNAME
• DATABASE_PASSWORD
• DATABASE_HOST
• DATABASE_PORT
• DATABASE_NAME

Deploying Frontend to the Cloud

Good job on getting the Strapi backend running! Now you need to get the Gatsby frontend deployed. This is the easiest part, so I saved it for last. I tried multiple places to host my frontend, and my favorite, free option, was Netlify.

Create a free account and connect it to Github. Connect to your front end repository and set your build command and publish directory.

Build command: cd site && yarn build

Publish directory: site/public/

Create one environment variable

STRAPI_API_URL — set to HTTPS address for your Heroku or digital ocean strapi site.

Setup Incremental Builds

First, you need to set up a webhook on Strapi to trigger a deployment on Netlify.

Second, you can do incremental builds, so ONLY the page that changed is updated.
https://github.com/jlengstorf/netlify-plugin-gatsby-cache#readme

Viola! You did it!