Original post from shannonwilliams.io

Who is this post for? Each post in the series is loosely dependent on each other. So you can follow any post in any order you like. Posts were made this way so you don’t have to read all the previous ones to follow along.

The goal of this post is to allow anyone to quickly understand how to get up and running with Strapi and Gatsby. This is for anyone who need to:

• understand how they work together,
• get a project quickly up and running.

Why Use Strapi and Gatsby Together ?

What is Gatsby? Gatsby is a generator framework for building sites built using ReactJs. It has built in client-side routing (react-router), local-state management (Redux), plugins, theming and various other APIs for personalizing the app’s behavior. I recommend checking out there official documentation and comparison with other frameworks.

What is Strapi? Strapi is an open-source Headless CMS, built on NodeJs, that makes managing content easy. It’s built with developers in mind with things like, automatic creation of REST and GraphQL APIs, admin UI for managing content, authentication, files, and making it easily extensible with plugins and custom controllers and services. I also recommend reading the Strapi official documentation.

How They Work Together? Simple, Gatsby will be used for building a web app in React, which will make API calls to Strapi for resources.

Setting Up Gatsby

If NodeJs and NPM are not downloaded and installed, you can download them here. Follow the installation wizard and you’ll be finished in a few minutes.

Open a terminal (Mac OS) or command prompt (Windows), and install the Gatsby command line tools (CLI):

   npm install -g gatsby-cli

Navigate into your directory of choice

   cd <replace-with-desired-directory>

Create a new site:

   gatsby new <replace-with-site-name>

Navigate into your site’s folder:

   cd <site-name>

Start the site in developer mode:

   gatsby develop

Now within a browser you can enter localhost:8000 (The default port is 8000).

Setting Up Strapi

cd into the directory where you want the Strapi instance to be.

   cd <replace-with-desired-directory>

(Option 1) Install and run Strapi – without connecting to database (Use SQLite).

   npx create-strapi-app <project-name> --quickstart

If successful, Strapi will begin running and you can begin configuring your admin account at http://localhost:1337/admin.

(Option 2) Install and run Strapi – with a database.

   npx create-strapi-app <project-name>

Follow the in-terminal setup wizard for connecting to your database. Should look similar to this:

Once installation is finished, cd into the new directory:

   cd <replace-with-desired-directory>

Start Strapi in development mode:

   npm run develop

If successful, Strapi will begin running and you can begin configuring your admin account at http://localhost:1337/admin.

Wrapping Up

That’s it ! Now you can begin developing your client app with Gatsby and begin managing content with Strapi.