Getting Started With Gatsby and Strapi
Published: 2020-01-03 01:35:31

*[Original post from shannonwilliams.io](https://shannonwilliams.io/getting-started-with-gatsby-and-strapi/)*

**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](https://www.gatsbyjs.org/docs/) and [comparison with other frameworks](https://www.gatsbyjs.org/features/).

**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](https://strapi.io/documentation/3.0.0-beta.x/getting-started/introduction.html).

**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):

```shell
   npm install -g gatsby-cli
```
Navigate into your directory of choice

```shell
   cd <replace-with-desired-directory>
```
Create a new site:

```shell
   gatsby new <replace-with-site-name>
```
Navigate into your site’s folder:

```shell
   cd <site-name>
```
Start the site in developer mode:

```shell
   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.

```shell
   cd <replace-with-desired-directory>
```
**(Option 1) Install and run Strapi – without connecting to database (Use SQLite).**

```shell
   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](http://localhost:1337/admin).

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

```shell
   npx create-strapi-app <project-name>
```
Follow the in-terminal setup wizard for connecting to your database. Should look similar to this:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/56v3btqw28f0t43cj6ij.png)

Once installation is finished, `cd` into the new directory:

```shell
   cd <replace-with-desired-directory>
```
Start Strapi in development mode:

```shell
   npm run develop
```
If successful, Strapi will begin running and you can begin configuring your admin account at [http://localhost:1337/admin](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.