AWS Amplify: A review of advanced features

AWS Amplify made its debut in November 2017 and since then, has been pumping out apps left and right. In this article, we will review what Amplify is, how it works, and some of the more advanced Amplify features that you might not have known existed.

What is AWS Amplify?

AWS Amplify is a command-line interface to a Java library connection that accesses a toolchain for clients. Amplify’s interface provides quick access to work with single-page applications (SPA) frameworks via containers linking the Java library to other cloud services like AWS AppSync and AWS S3. Amplify can also tie into existing repositories.

Using the CLI and library toolchain provided by Amplify, you can quickly build, deploy, host, experiment and iterate web and mobile apps at low cost.

Easy development with AWS integrations

Using AWS Amplify does not require a ton of application development experience in order to leverage the Amplify console for CI/CD. This is in part because the Amplify console acts as a frontend CI/CD hosting service for modern apps.

Amplify simplifies both backend and frontend application deployments by connecting to your code repository and rolling out single workflows with each code commit. Amplify also capitalizes on Amazon’s CDN, CloudFront, to make hosting easy.

With its containerized approach to creation and AWS CloudFormation deployment, Amplify allows you to push updates while eliminating frontend and backend inconsistencies. And, while there are benefits and tradeoffs to going serverless, Amplify makes it easy to ship your mobile and web app code using cloud managed services.

For creating light and powerful GraphQL APIs, AWS Amplify also integrates with AWS AppSync, which allows you to query Amazon’s DynamoDB NoSQL datastores or choose a REST API via Amazon API Gateway. You can also work with custom AWS Lambda, connect to AWS S3, and use CloudFormation to backend your configuration, provisioning, and deployment for configuration drifts.

For more on AWS services, check out this cheat sheet.

Using Amplify in your dev environment

Amplify supports 3rd party tool integration like Github, Gitlab, and AWS CodeCommit repositories. With the Amplify CLI, you can quickly add features to your app by tying it to other services like Amazon Cognito, AWS Appsync or AWS Lambda or S3.

Amplify follows Amazon’s “pay for what you use” model. You will typically pay for build minute, frontend storage, and data served, as well as the backend resources that your CloudFormation template creates. The power of serverless is its ability to grow with your application user base, which is part of what makes Amplify a great tool for growing businesses.

In the following sections, we’ll talk about some of the fun things that you can do with Amplify. For all features, it is assumed that the Amplify CLI has been installed and configured; for demo purposes, we will work within a React application.

Authentication

Amplify lets you create seamless and easy-to-implement authentication using Amazon Cognito, which includes actions like login, signup, forget password option, and multifactor authentication workflow. You can also add login integrations with social accounts like Google, Facebook, and Amazon.

Authentication in Amplify

First, add the authentication library:

amplify add auth

In your React application directory, install the Amplify library:

npm install aws-amplify @aws-amplify/ui-react

In your, App.js make sure you import the required components you need from the aws-amplify/ui-react library. For now, we are importing withAuthenticator and AmplifyAuthenticator:

import React from 'react'; 
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'; 
const App = () => ( <div> <AmplifySignOut /> My App </div> ); export default withAuthenticator(App);

You will also notice the AmplifySignOut component here, which renders a signout button.

Datastore

Amplify can come in handy if you are developing an application that is going to use the on-device persistent storage engine. Amplify allows you to synchronize data between mobile/web apps and cloud using GraphQL.

Datastore, which is powered by AWS Appsync, allows leveraging stored data and distributed data without writing any additional code for offline and online scenarios. This makes working with distributed data as simple and convenient as working with the local data. Datastore also allows you to persist data locally on your device without even having to create an AWS Account.

Datastore in Amplify:

The fastest way to get started with using datastore in React is:

npx create-react-app amplify-datastore --use-npm 
cd amplify-datastore 
npx amplify-app@latest

Analytics

Once your application is deployed, it may be beneficial for you to use some form of analytics to measure how people are interacting with your app, how it is performing in general, and how it operates across different platforms and browsers.

Powered by AWS Pinpoint and AWS Kinesis, Amplify lets you use auto-tracking to track user sessions, web page metrics, and create custom user attributes and in-app metrics. When you use Amplify for analytics, you’ll also get real-time data stream access to pull out user insights and build data-driven marketing strategies that improve customer adoption and engagement.

Using analytics in Amplify

Backend setup

To set up on backend, run this command in your projects root folder:

amplify add analytics

Make sure you provide your endpoint resource name (yourPinpointResourceName). You can deploy the backend using amplify push.

Once deployed, a configuration file named aws-export.js will be copied in your project folder directory and an AWS Pinpoint Link will be shared to you via CLI to track your app events.

Frontend setup

To set up on frontend, make sure you import the aws-export.js file alongside Amplify in App.js:

import Amplify from 'aws-amplify'; 
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

Recording events

To record an event, you can simplify create a record method like this:

import Amplify, { Analytics } from 'aws-amplify'; 
Analytics.record({ name: 'albumVisit' });

AI/ML with Amplify

Yes, you read that right! You can add AI and ML capabilities including text prediction, speech generation from the text, text translation, image recognition, text interpretation, and more to your Amplify application. Amplify simplifies the orchestration of advanced use cases like uploading an image for automatic trading and uses GraphQL directives for chaining multiple AI/ML actions.

Amplify’s AI/ML capabilities are powered by AWS SageMaker and Amazon machine learning services. You don’t need to spin your own server to use this model or capabilities in your React application.

Using AI/ML with Amplify

Backend setup:

To set up on backend, run this command in your projects root folder:

amplify add predictions

Once your required backend configuration is ready, you can deploy using amplify push. A configuration file named aws-export.js will then be copied in your project folder directory.

Frontend setup:

Import the configuration file that is generated in your application’s root entry point; in this demo, we’ll use app.js in React:

import Amplify from 'aws-amplify';
import Predictions, { AmazonAIPredictionsProvider } from '@aws-amplify/predictions'; 
import awsconfig from './aws-exports';
Amplify.configure(awsconfig); Amplify.addPluggable(new AmazonAIPredictionsProvider());

Storage

Amplify provides a very simple mechanism for managing user content, regardless of whether your data is public-facing, stored in private buckets, or protected. This makes taking your application storage needs to production easy. Unsurprisingly, Amplify comes with built-in support for Amazon S3.

Using Storage with Amplify

Backend setup:

To set up on backend, run this command in your projects root folder:

amplify add storage

Next, the CLI will have you select a content type and will walk you through the option to enable Auth if it has not been enabled previously. It will also ask you to name your S3 bucket.

As in the previous sections, you can deploy using amplify push. A configuration file named aws-export.js will be copied in your project folder directory.

Frontend setup:

Make sure you install aws-amplify to work with the storage library. You can install it using npm install -S aws-simplify.

Import the configuration file that is generated in your application’s root entry point; in this demo, we’ll use app.js in React:

import Amplify, { Storage } from 'aws-amplify'; 
import awsconfig from './aws-exports'; 
Amplify.configure(awsconfig);

You can also configure the storage setting manually in aws-export.js if necessary.

Conclusion

Amplify has only been around for a couple years, but it is growing very fast. In fact, Amazon has even pushed its mobile hub towards Amplify.

Working with Amplify has some notable advantages, many of which have do with harnessing the power of AWS serverless technology. Amplify also makes pumping up your CI/CD straightforward and simple.

One last note: Amplify works best from the CLI and lets developers roll out SPAs quickly from their editor of choice. However, if you prefer not to work from the CLI, Amplify might not be the best for you.

The beauty of AWS services is that they let developers focus on their code, and everything else is taken care of by AWS. With Amplify, there are tons of AWS integrations to choose from that let you build and deploy web and mobile apps at low cost and with great efficiency.