Gatsby + AWS Amplify

Published on 2020-04-09

Pre-requisites

  • Sign up for an AWS Account. To get started there are no up-front costs, however, keep in mind AWS follows the pay-as-you-go business model. Make sure to refer to the pricing tiers, each service generally has a free tier to leverage.

Install the Gatsby CLI

npm install -g gatsby-cli

"The above command installs the Gatsby CLI globally on your machine."

Create a new Gatsby Site

gatsby new new-gatsby-site

Change directories into the site folder

cd new-gatsby-site

Start development server

gatsby develop

"Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000."

Try editing the JavaScript pages in src/pages, and saved changes will live reload in the browser.

Now that you have a Gatsby site up and running, let's get AWS Amplify in the mix.

Install AWS Amplify CLI

npm install -g @aws-amplify/cli

Configure Amplify

amplify configure

"After running amplify configure, it will prompt you to enter the region you would like to deploy your artifacts. It will then prompt you to create an IAM user to authorize changes made in your AWS account."

  • Enter a username for the IAM user account. I used amplify-user.
  • Make sure you select the Policy named: AdministratorAccess (this should be the default).
  • Add any tags if necessary.
  • Create the user.
  • Make sure to save the access keys created; you will need these in the next steps.
  • Navigate back to your command prompt, and it will be prompting you for the access and secret keys.

"Your Amplify CLI is now configured to create and deploy resources."

Initialize Amplify Project

amplify init

"Follow the command prompt as you initialize your application. Below are the configurations I used for this tutorial, but feel free to use whatever you'd like."

  • Project name: gatsby-new-site
  • Environment: master
  • Default Editor: Visual Studio
  • App Type: Javascript
  • Framework: React
  • Source Directory: src
  • Distribution Directory: public
  • Build Command: npm.cmd run-script build
  • Start Command: npm.cmd run-script start
  • Default Provider: awscloudformation
  • Do you want to use an AWS Profile: Yes
  • Select Profile you created above (mine was amplify-user).

You can now begin adding resources with Amplify and leveraging the Amplify CLI to deploy them.

Install AWS Amplify Modules

yarn add aws-amplify && yarn add aws-amplify-react

Configure Gatsby App to leverage Amplify

  • Navigate to the src/ directory of your Gatsby site.
  • You will find a file aws-exports.js; this file was generated when initializing Amplify.
  • This file contains information about your AWS resources created with Amplify.

Navigate to src/pages, and let's configure the IndexPage to connect your Amplify configurations with your Gatsby website:

import config from '../aws-exports';
import Amplify from 'aws-amplify';
Amplify.configure(config);

Now your application is bootstrapped with Amplify and ready to begin development.

Start the Gatsby development server

gatsby develop

You will be greeted with the homepage.