← Back Home

Gatsby Serverless CRUD Part 1: Setup AWS Amplify, Appsync, Authentication

January 11, 2020

Peter Hironaka - Front End Developer

@peterhironaka

Since I first dipped my toes into Full Stack Development, I've been wanting to create a digital product that users around the world could use. Rails was (is) and excellent framework to get started. Django was also just as intuitive (love the built in admin interface!).

Lately, and when I say lately I probably mean the last 3-4 years, the line between Front End and Back end has become increasingly blurred. There are a number of factors that have played into this, but none more than the emergence of JS Frameworks and Serverless Architecture. Although documentation is still somewhat sparse in its early stages, the possibilities for what developers can create is endless.

This is part one of a series in which I will be building a CRUD Serverless Application with Gatsby and the Amplify CLI. This will assume you already have Gatsby and Amplify CLI installed locally on your machine. If you do not, I suggest you visit their sites which document the setup quite well:

Gatsby: https://www.gatsbyjs.org/docs/ Amplify: https://aws-amplify.github.io/docs/

Here is the bare bones Demo I have setup:

https://master.ddkk4gy1ayi3g.amplifyapp.com/

Here is the source code for the Demo:

https://github.com/PHironaka/gatsbyamplifygot

To get started, let's get gatsby up and running:

gatsby new gatsbycrud

Once installation finishes, let's install gatsby-source-graph. We'll use this plugin to query our API we're about to create.

Next step is initializing our Amplify project. Assuming you've already configured Amplify w/IAM user. Let's run amplify init to start scaffolding our project requirements. I am a VS Code user, so I select that for my editor of choice. Here's a screenshot from Nader Dabit's video tutorial on setup:

Once you have selected which IAM user you want to use with the project, the init should finish and you should see a green check with text saying 'your project has been initialized and connected to the cloud!'. The shell of your project is now set up, let's start adding stuff!

Before we do that though, let's take a step back and examine what this all means. What is Amplify and what purpose does it serve? What just happened? Amplify is a CLI, a toolchain that connects AWS'vast services together to create a serverless backend. Ask any developer with some experience using AWS and they'll tell you it's not the most intuitive interface in the world. Amplify is great because it does all that heavy lifting for you in an automative format of CLI commands.

Next step - the api. Run amplify add api from the command line. You'll be prompted to answer another list of questions, here are the answers you should submit:

Please select from one of the above mentioned services GraphQL

Provide API name: GotAPI

Choose an authorization type for the API API key

Do you have an annotated GraphQL schema? N

Do you want a guided schema creation? Y

What best describes your project: Single object with fields (e.g. “Todo” with ID, name, description)

Do you want to edit the schema now? (Y/n) Y

When prompted, update the schema to the following:

type Character @model {
  id: ID!
  name: String!
  description: String
  avatar: String
}

Let's push these changes to the cloud! Run amplify push to add the new api to Appsync. Navigate over to AWS Appsync from aws.com, we're going to create a mutation. You should see something like the screen shot below. Make sure and create a muation like I have.

Congratulations! You've made it to the end of part 1. In part 2, we'll query our newly created mutation within our Gatsby app.