Setting Up your Gatsby Development Environment

Once you are logged into Agility CMS, you'll want to collect some API credentials so your Gatsby site can authenticate and source data from your instance.

From your Agility CMS dashboard, click into Settings > API Keys.

Take note of your GUID and your Live API Key and Preview API Key credentials and copy these somewhere temporarily as you'll need to use them later.

Get the Code

Make sure you have Gatsby CLI tools installed.

npm install -g gatsby-cli

Go ahead and clone the starter repo on from GitHub that has all the code you need to get started.

gatsby new agilitycms-gatsby-starter https://github.com/agility/agilitycms-gatsby-starter

Switch to your code directory.

cd agilitycms-gatsby-starter

Setup Authentication

Make a copy of ./.env.development.example called /.env.development.

cp .env.development.example .env.development

Add your development AGILITY_GUID and AGILITY_API_KEY variable values in .env.development

# Your Instance Id
AGILITY_GUID=

# Your Preview API Key (recommended) - you can get this from the Getting Started Page in Agility CMS. It starts with defaultpreview.
AGILITY_API_KEY=

# If using your Preview API Key, set this to true
AGILITY_API_ISPREVIEW=true

Make a copy of ./.env.production.example called /.env.production.

cp .env.production.example .env.production

Add your development AGILITY_GUID and AGILITY_API_KEY variable values in .env.production

# Your Instance Id
AGILITY_GUID=

# Your Live API Key (recommended) - you can get this from the Getting Started Page in Agility CMS. It starts with defaultlive.
AGILITY_API_KEY=

# Since you won't want to preview here, set this to false
AGILITY_API_ISPREVIEW=false

Start the Site

To run the site locally run gatsby develop. This will use your .env.development variables.

gatsby develop

If successful, your site's build should complete and you be able to view the site in your browser on http://localhost:8000.