Setting Up your Gatsby Development Environment

Follow

  Note

This guide is for setting up your local environment using the agility-gatsby-starter site based on the Blog Template.

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.

On the Getting Started page, click the API Keys button to retrieve your credentials.

Content Fetch API Details

Then, click the Show API Key(s) button to view your Live and Preview keys.

Content Fetch API Details

Take note of your GUID and your Live API Key and Preview API Key. Click the Show buttons beside both to unmask the credentials and copy these somewhere temporarily. You'll need 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 agility-gatsby-starter https://github.com/agility/agility-gatsby-starter

Switch to your code directory.

cd agility-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.

mceclip0.png

Did you get a Build Error?

If you get an error during the build, check your log and ensure that you've entered your Guid and API Key in your .env.development file.

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.