1. Agility CMS Help Center
  2. Gatsby
  3. Getting Started

Setting Up your Gatsby Development Environment

Follow
Avatar
James Vidler

  Note

This guide is for setting up your local environment using the agility-gatsby-starter site based on the Gatsby 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.

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

Screen_Shot_2020-11-02_at_2.21.59_PM.png

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

1 out of 1 found this helpful

Comments

1 comment
Sort by Date Votes
  • Avatar
    Alfredo Rock

    Also the gatsby command provided some error gatsby.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at
    https:/go.microsoft.com/fwlink/?LinkID=135170.
    At line:1 char:1
    + gatsby develop
    ended up have to set some unrestricted option for the windows 10 machine.
    Get-ExecutionPolicy -List
    Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope LocalMachine
    Definitely worth including that in the instructions.
    Thanks

    0
    Comment actions Permalink

Please sign in to leave a comment.