Getting started with AWS Amplify with React application

Install & Initialize Amplify in React application

Install AWS Amplify CLI

$ npm install -g @aws-amplify/cli

Install Create react app CLI

$ npm install -g create-react-app

Create react project

$ create-react-app aws-amplify-test

$ cd aws-amplify-test

Install nodejs packages for AWS Amplify

$ npm install aws-amplify aws-amplify-react
or
$ yarn add aws-amplify aws-amplify-react

Initialize Amplify

$ amplify init

Accept defaults and provide values to those you wish to have as part of initializing amplify environment

Add Authetication capability

Add AWS Cognito Authentication capability

$ admplify add auth

Choose option to configure manually and enter resouce name as amplifytestcognitouserpool and pool name as amplify_test_cognitouserpool
Choose rest of the options as per authetication requirements
Include amplify library and configuration code as below to setup Authetication in app.js

import Amplify from 'aws-amplify';
import awsmobile from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(awsmobile);
....
....
....
export default withAuthenticator(App, true);

Check Amplify Status

$ amplify status

should return something as below

Current Environment: dev

| Category | Resource name              | Operation | Provider plugin   |
| -------- | -------------------------- | --------- | ----------------- |
| Auth     | amplifytestcognitouserpool | Create    | awscloudformation |

Push changes

$ amplify push

Login to AWS console and check if amplify_test_cognitouserpool-dev user pool is created in Cognito. -dev is appended as we used dev as the environment when initializing amplify
Start React application

$ npm start
or
$ yarn start

Accessing http://localhost:3000/ should show up default login screen provided by AWS Cognito
Signup with your username, password, email and phone number
Check your mobile/email for the verification code. If you haven't received, confirm the user manually from AWS Cognito console
Login with the username and password
should be routed to home page with logout button displayed in the header

Add GraphQL API

Run below command to add API and choose GraphQL

$ amplify add api

Choose name amplifyTestAPI
Choose Cognito authetication type
Choose No for annotated GraphQL schema
Choose Yes for guided schema creation
Choose One-to-many relationships for project
Choose Yes to edit the schema now. This will create schema.graphql and open it in VS Code editor
Press enter to end the schema creation
Check Amplify Status

$ amplify status

should return something as below

Current Environment: dev

| Category | Resource name              | Operation | Provider plugin   |
| -------- | -------------------------- | --------- | ----------------- |
| Api      | amplifyTestAPI             | Create    | awscloudformation |
| Auth     | amplifytestcognitouserpool | No Change | awscloudformation |

Push the changes

$ amplify push

When prompted for code generation, choose Yes and accept defaults for subsequent prompts
This should display the GraphQL endpoint when all the resources are created/updated in the cloud
As part of the API creation in cloud, you can observe there are bunch of folders & files created under amplify\backend\api and src\graphql
Go to AWS Console > Appsync and see the API is created with suffix -dev appened to it.
Click on the API name to through Schema, datasource that is created based upon schema
DynamoDB Table created under this API will include the API Id in the table name. This will ensure that different tables are created for different Amplify environments
To play with the schema from Queries section, get the aws_user_pools_web_client_id from src\aws-exports.js. Click on Login via Cognito User Pool. Provide the client id and user credentials that is provided during user signup as above.
Click on < Docs and choose the appropriate option to use the GraphQL Playground app
Sample to create a blog

// Execute below query to perform mutation to create new blog
mutation CreateReviewForEpisode($blog: CreateBlogInput!) {
  createBlog(input: $blog) {
    id
    name
  }
}

// Under Query Variables
{
  "blog": {
    "name": "First Blog"
  }
}

// This should return something like below once blog is created
{
  "data": {
    "createBlog": {
      "id": "d322a73a-17c3-48cf-911a-a549e3f94353",
      "name": "First Blog"
    }
  }
}

Sample to query

// List all blogs with posts under it
{
	listBlogs {
    items {
      id
      name
      posts {
        items {
          id
          title
          blog {
            name
          }
        }
      }
    }
  }
}

Use GraphQL API in React app

Update App.js with the below which will create a blog with unique name and list all blogs that are created.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import Amplify, {API, graphqlOperation} from 'aws-amplify';
import awsmobile from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';

import uuid4 from 'uuid4'

import {listBlogs} from './graphql/queries'
import {createBlog} from './graphql/mutations'

Amplify.configure(awsmobile);

class App extends Component {

  createBlogMutation = async() => {
    console.log('Creating Blog');
    const CreateBlogInput = {
      name: 'Blog-'+uuid4()
    };

    const newEvent = await API.graphql(graphqlOperation(createBlog, {
      input: CreateBlogInput
    }));
    console.log('Blog is created: ',JSON.stringify(newEvent));
  }

  listBlogsQuery = async() => {
    console.log('listing blogs');
    const allBlogs = await API.graphql(graphqlOperation(listBlogs));
    console.log('Available blogs:', JSON.stringify(allBlogs));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <span>
            <button onClick={this.createBlogMutation}>Create new Blog</button>
            <button onClick={this.listBlogsQuery}>List all blogs</button>          
          </span>
        </header>
      </div>
    );
  }
}

export default withAuthenticator(App, true);

Login to the application
Open up developer console and click on Create new blog & List all blogs and see up the magic !!!

Add Analytics

Run below command to add Analytics capabilities and name it awsamplifytest

$ amplify add analytics

Choose No when prompted when asked for allow guests and unautheticated users
Running amplify status should show something like below

λ amplify status

Current Environment: dev

| Category  | Resource name              | Operation | Provider plugin   |
| --------- | -------------------------- | --------- | ----------------- |
| Analytics | awsamplifytest             | Create    | awscloudformation |
| Auth      | amplifytestcognitouserpool | Update    | awscloudformation |
| Api       | amplifyTestAPI             | No Change | awscloudformation |

Run amplify push to create pinpoint service. It should show up All resources are updated in cloud
Add the below code to App.js which will publish events when user clicks add blog and list all blog button. Actually click these couple of times.

import Amplify, {API, graphqlOperation, Analytics} from 'aws-amplify';
....
....

createBlogMutation = async() => {
....
....
Analytics.record('Blog is created');
}

listBlogsQuery = async() => {
....
....
Analytics.record('listing blogs');
}

Login to aws console and select service Pinpoint
Click on the service created with -dev and navigate to Analytics > Events. Click on Event dropdown and you will see the events that we actually fired in the above code and you can see the number of times the event occurred is number of times you clicked the button.

Host the App using Amplify

Run below command to add host the app on Amazon S3.

$ amplify add hosting

Choose Dev when prompted for environment
Choose default for hosting bucket name, index doc, error doc
Running amplify status should show something like below

Current Environment: dev

| Category  | Resource name              | Operation | Provider plugin   |
| --------- | -------------------------- | --------- | ----------------- |
| Hosting   | S3AndCloudFront            | Create    | awscloudformation |
| Auth      | amplifytestcognitouserpool | No Change | awscloudformation |
| Api       | amplifyTestAPI             | No Change | awscloudformation |
| Analytics | awsamplifytest             | No Change | awscloudformation |

Run amplify publish to publish the application on S3.
You should see the message that app is successfully hosted with the url looking something like this - http://aws-amplify-test-XXXXXXXXXX-hostingbucket-dev.s3-website-us-east-1.amazonaws.com
Login and follow the steps done before to click tist blogs and create blog.

Configure environment for Production

So far so good. Now its time to move the app to production.

Lets create production environment by running below command

$ amplify env add

Add env as prod and accept defaults for the rest of the questions
Amplify will switch to the newly created environment by default. Run the below command to see the list of environments and what is selected by default

$ amplify env list

This should display as below

$ amplify env list

| Environments |
| ------------ |
| dev          |
| *prod        |

To switch to dev environment, run the below command

$ amplify env checkout dev

You should see the environment is initialized successfully. Now switch back to prod using above command.
Running amplify status should show that all resources that are created in dev environment are to be created in the prod environment

Current Environment: prod

| Category  | Resource name              | Operation | Provider plugin   |
| --------- | -------------------------- | --------- | ----------------- |
| Auth      | amplifytestcognitouserpool | Create    | awscloudformation |
| Api       | amplifyTestAPI             | Create    | awscloudformation |
| Analytics | awsamplifytest             | Create    | awscloudformation |
| Hosting   | S3AndCloudFront            | Create    | awscloudformation |

Run amplify push and choose options that were selected when adding Auth, API, Analytics & Hosting and wait for the resources to be created.
This will create all the resources and list you the endpoints for Pinpoint, GraphQL & Hosting something like below

√ Generated GraphQL operations successfully and saved at src\graphql
√ All resources are updated in the cloud

Pinpoint URL to track events https://console.aws.amazon.com/pinpoint/home/?region=us-east-1#/apps/XXXXXXXXc8ae6090db9a7bffd6/analytics/events
GraphQL endpoint: https://XXXXXXi3kufolm2qnfu.appsync-api.us-east-1.amazonaws.com/graphql
Hosting endpoint: http://aws-amplify-test-XXXXXXX-hostingbucket-prod.s3-website-us-east-1.amazonaws.com

narramadan/aws-amplify-react-test

Getting started with AWS Amplify with React application

Install & Initialize Amplify in React application

Add Authetication capability

Add GraphQL API

Use GraphQL API in React app

Add Analytics

Host the App using Amplify

Configure environment for Production

Configure Git for multi user development

Configure CI/CD Pipeline to push & deploy changes to production

Delete Amplify resources