Javascript is required
·
10 min read

Build and Deploy a Serverless GraphQL React App Using AWS Amplify

Build and Deploy a Serverless GraphQL React App Using AWS Amplify Image

Recently I recognized that some SaaS (Software as a Service) products use AWS Amplify which helps them to build serverless full-stack applications. I think serverless computing will be the future of apps and software. Therefore, I wanted to gather some hands-on experience, and I built a serverless application using AWS Amplify that uses React as frontend framework and GraphQL as backend API.

In this article, I want to guide you through the process how to build and deploy such an Amplify application.

Set up Amplify

AWS Amplify describes itself as:

Fastest, easiest way to build mobile and web apps that scale

Amplify provides tools and services to build scalable full-stack applications powered by AWS (Amazon Web Services). With Amplify configuring backends and deploying static web apps is easy. It supports web frameworks like Angular, React, Vue, JavaScript, Next.js, and mobile platforms including iOS, Android, React Native, Ionic, and Flutter.

You'll need to create an AWS account to follow the following steps. No worries, after signing up you have access to the AWS Free Tier which does not include any upfront charges or term commitments.

The next step is to install the Amplify Command Line Interface (CLI). In my case I used cURL on macOS:

bash
curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

Alternatively, you can watch this video to learn how to install and configure the Amplify CLI.

Now we can configure Amplify using the CLI

bash
amplify configure

which will ask us to sign in to AWS Console. Once we’re signed in, Amplify CLI will ask us to create an AWS IAM user:

bash
1Specify the AWS Region
2? region:  # Your preferred region
3Specify the username of the new IAM user:
4? user name:  # User name for Amplify IAM user
5Complete the user creation using the AWS console

We'll be redirected to IAM where we need to finish the wizard and create a user with AdministratorAccess in our account to provision AWS resources. Once the user is created, Amplify CLI will ask us to provide the accessKeyId and secretAccessKey to connect Amplify CLI with our created IAM user:

bash
1Enter the access key of the newly created user:
2? accessKeyId:  # YOUR_ACCESS_KEY_ID
3? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
4This would update/create the AWS Profile in your local machine
5? Profile Name:  # (default)
6
7Successfully set up the new user.

Set up full-stack Amplify project

At this point, we are ready to set up our full-stack project using a React application in the frontend and GraphQL as backend API. We'll build a Todo CRUD (create, read, update, delete) application that uses this architecture:

Amplify demo architecture

The complete source code of this demo is available at GitHub.

Create React frontend

Let's start by creating a new React app using create-react-app. From our projects directory we run the following commands to create our new React app in a directory called amplify-react-graphql-demo and to navigate into that new directory:

bash
1npx create-react-app amplify-react-graphql-demo
2cd amplify-react-graphql-demo

To start our React app we can run

bash
npm start

which will start the development server at http://localhost:3000.

Initialize Amplify

Now it's time to initialize Amplify in our project. From the root of the project we run

bash
amplify init

which will prompt some information about the app:

bash
1 amplify init
2? Enter a name for the project amplifyreactdemo
3The following configuration will be applied:
4
5Project information
6| Name: amplifyreactdemo
7| Environment: dev
8| Default editor: Visual Studio Code
9| App type: javascript
10| Javascript framework: react
11| Source Directory Path: src
12| Distribution Directory Path: build
13| Build Command: npm run-script build
14| Start Command: npm run-script start
15
16? Initialize the project with the above configuration? Yes
17Using default provider  awscloudformation
18? Select the authentication method you want to use: AWS profile
19? Please choose the profile you want to use: default

When our new Amplify project is initialized, the CLI:

  • created a file called aws-exports.js in the src directory that holds all the configuration for the services we create with Amplify
  • created a top-level directory called amplify that contains our backend definition
  • modified the .gitignore file and adds some generated files to the ignore list

Additionally, a new cloud project is created in the AWS Amplify Console that can be accessed by running amplify console. Amplify Console provides two main services: hosting and the Admin UI. More information can be found here.

The next step is to install some Amplify libraries:

bash
npm install aws-amplify @aws-amplify/ui-react typescript
  • aws-amplify: the main library for working with Amplify in your apps
  • @aws-amplify/ui-react: includes React specific UI components
  • typescript: we will use TypeScript in some parts of this demo

Next, we need to configure Amplify on the client. Therefore, we need to add the following code below the last import in src/index.js :

1import Amplify from 'aws-amplify'
2import awsExports from './aws-exports'
3Amplify.configure(awsExports)

At this point wee have a running React frontend application, Amplify is configured, and we can now add our GraphQL API.

Create GraphQL API

We will now create a backend that provides a GraphQL API using AWS AppSync (a managed GraphQL service) that uses Amazon DynamoDB (a NoSQL database).

To add a new API we need to run the following command in our project’s root folder:

bash
1 amplify add api
2? Please select from one of the below mentioned services: GraphQL
3? Provide API name: demoapi
4? Choose the default authorization type for the API: API key
5? Enter a description for the API key:
6? After how many days from now the API key should expire (1-365): 7
7? Do you want to configure advanced settings for the GraphQL API: No, I am done.
8? Do you have an annotated GraphQL schema? No
9? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)