Building Serverless Web Application with AWS Amplify

 AWS Amplify

What is AWS Amplify?

AWS Amplify is a CLI and toolchain for the client. It's a toolchain because it does code generation.

What does it do?

CLI (Creates & configures AWS services)

Its something you will install in your terminal (or in the command line), and you will be able to create and configure AWS services directly from your front end environment.

Client (JavaScript) Library (Connects your front-end application to cloud services)

This will allow you to take those resources that you created with the CLI, ( it connect into JS application you are working with ) it interacts with different services that you scaffold to do the CLI.

What kind of service can you build and interact with using Amplify?

• Database (DynamoDB, RDS, ElasticSearch & SQL databases)

• API (Allows you to scaffold and setup complete end to end API. Ex: REST API, custom API  )

• Lambda / Serverless

• Authentication

• Analytics

• Hosting

• Storage

Database API

Amazon DynamoDB + AWS Lambda + Amazon API Gateway

-> Create & configure table
-> Create a Lambda function
-> Configure API Gateway
-> Scaffolds Lambda code to act as REST API
-> Interact with Lambda Function using client Library.

REST API

AWS Lambda + Amazon API Gateway

-> Create new AWS Lambda Function
-> Scaffold Lambda code
-> Configure API Gateway
-> Interact with Lambda function with client Library

Function

AWS Lambda

-> Create & configure Lambda functions
-> Push changes
-> Invoke function locally
-> Interact with Lambda function from using a client library

Authentication

Amazon Cognito

-> Create & Configure new Amazon Cognito resources for user signup & sign in (Even more than that like forgot the password, multi-factor authentication, etc.)
-> Interact with Amazon Cognito using Auth class from Client Library
-> Pre-configured components available for React, React Native, Angular & Ionic

Analytics

Amazon Pinpoint

-> Create & configure new Amazon Pinpoint resources
-> Record events from the client application
-> Automatically record session data
-> Automatically record auth data (sign-ups, sign-ins, and auth failures)

GraphQL API

AWS AppSync

-> Create new AWS AppSyncGraphQL API
-> Configure AppSync
-> Perform queries, mutations, & register subscriptions from the client application.
-> React & React Native Components for render props.

Hosting

Amazon S3

-> Creates & configure S3 bucket for hosting
-> Configure Amazon Cloudfront
-> Publishes assets to S3
-> Push updates when necessary directly from CLI

Storage

Amazon S3

-> Create & configure the Amazon S3 bucket.
-> Manage user content for your app in public, protected or private storage buckets.

AWS Amplify CLI

Getting started

Installing the CLI

npm i -g amplify-cli // install amplify CLI globally

Initializing a new project

amplify init // Scaffold a complete amplify project and get it ready to go so you can then start adding different services.

Adding a feature

amplify add auth // This will go ahead and scaffold some authorization code for you.

Add framework-specific library

npm install aws-amplify-react // If it is a react project (If it is an Angular project then aws-amplify-Angular)

Import component

import {Auth} from 'aws-amplify' // Importing `Auth` from AWS amplify. Auth is going to allow us to use Amazon Cognito

Add library to project

npm install aws-amplify // Install aws-amplify client library. (Inside the same projects we initialized)

Interacting with services

Auth.signIn({
    username: this.state.username,
    password: this.state.password
})
.then(success => console.log('user successfully signed in!'))
.catch(err => console.log('error signing in user...',err))
Auth actually has 30+ different methods. Refer the documentation

AWS Amplify

"This CLI & toolchain for the client greatly lowers the barrier to entry for developers & companies looking to build full-stack applications allowing them to not only iterate & experiment quickly, but also giving them the ability to do so at a lower cost."