Using AWS Amplify feels like cheating.

Recently, I’ve enjoyed using mood tracking apps as a quick and easy way to journal at any time of the day. My main issue is that every mood tracking app I try isn’t perfect for my use case. Because of this, I decided to develop my own mood tracking app.

For this app I decided to use AWS to host the app’s backend. Eventually, I learned about AWS Amplify and how easy it made connecting my app’s UI to a backend hosted in AWS.

For this article, I will walk through what I did to get my app working.

First you have to install and configure the Amplify CLI itself. I suggest you follow the official docs for this process.

Once we’ve configured the Amplify CLI we will create a new React project.

create-react-app moodtrack

After creating the project we will go into our moodtrack directory and run the command

amplify init

The CLI will ask us some basic questions about our app. For the first question select the name of the editor you use. When the CLI asks what type of app you’re building select JavaScript and select React as the framework. For the source directory, distribution directory, start command, and build command press enter to get the default value.

Now lets add authentication into our app by running the command

amplify add auth

Press enter to use the default configuration. Now we will add a GraphQL API to our app using the command

amplify add api 

Select GraphQL as the API type and give it any name you’d like. Pick Cognito user pool as the authentication type (we created a Cogntio user pool in the previous step). Say no to having an annotated schema and answer yes to guided schema creation. Choose the first option for a “todo” app.

Create the resources in the cloud by using this command

amplify push

Answer yes to all the questions it asks. Resources will be created in AWS and Amplify will generate code for all possible queries, mutations, and subscriptions.

If you look at amplfy/backend/api/moodtrack/schema.graphql you will notice the following schema was automatically generated by amplify.

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

While this schema is perfect for a todo app, we need something different. Delete that schema and replace it with this one.

type MoodItem @model @auth(rules: [{ allow: owner }]) {
id: ID!
date: String!
note: String!
mood: String
}

The ‘auth(rules: [{ allow: owner}])’ line makes it so that a user can only see the ‘moods’ that they created.

Run amplify push again and allow it to generate new code for our new schema.

Now that all of our parts are in place we can integrate them. First we will add in authentication. To do this we will have to add the following packages to our app.

npm install --save aws-amplify aws-amplify-react

We can implement authentication into our app using a higher order component. You can add the following 2 lines to your app.js file to implement authentication.

import { withAuthenticator } from "aws-amplify-react";
<rest of code will be here>
export default withAuthenticator(App);

Now what do we do with the queries and mutations that Amplify generated for us?

While I will not walk through every possibility, here is an example of a basic add mood form.

As you can see, AWS Amplify makes connecting all of these services together so easy that it feels like you just used a cheat code to skip the tedious parts of web development.

Thanks for reading this article. If you have any questions feel free to reach out to me on twitter.