Get Amped about Amplify!
An exploration of Amazon’s platform for building “sophisticated cloud-powered apps.”
Background
In November of 2017, Amazon announced AWS Amplify. They described it as a, “declarative JavaScript library for cloud development with mobile or web applications.”
It was designed as a complement to AWS Mobile Hub and the AWS Mobile CLI. However, Amazon later shifted their focus to the Amplify platform and created the Amplify CLI:
The Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage the AWS cloud services for your app.
What is Amplify?
So what is AWS Amplify? In the words of Amazon it is, “an opinionated, category-based client framework for building scalable mobile and web apps.”
Let’s break this down. AWS Amplify unifies a lot of the resources and services that Amazon offers, in order to help you develop applications with ease.
For instance, it can help you:
- Create a backend API for your application with AWS AppSync,
- Manage authentication and users with AWS Cognito
- Host your application
- Create a slick UI with its component design kit
- Connect your application to AWS storage
- Handle push notifications, and a whole lot more!
Amplify has a lot in common with Google’s Firebase platform. Firebase is also a platform for application development, and it has a similar opening pitch:
Build apps fast, without managing infrastructure
Which isn’t entirely true in the case of Amplify or Firebase. These platforms are designed to help you manage your infrastructure. However, you are still managing infrastructure to some extent, just through the platform itself instead of directly.
Quibbling aside, they are both fantastic products. I will dive deeper into the pros and cons of each in a separate article.
How can I use it?
The first step is getting access to the Amplify CLI.
Getting started is simple. If you don’t already have an AWS account, go ahead and create one. Then, install the CLI:
$ npm install -g @aws-amplify/cli
$ amplify configureThat’s it! That’s all you need to be ready to develop an application with Amplify.
Walk Through!
Let’s create a small React application with hosting and authentication. The fact that this is simple is what makes Amplify so great.
We’re going to create a simple application with React, but one can do this with an iOS application, a generic web application, Android, or even React Native.
We can start by typing:
npx create react-app myapp
cd myapp
amplify initThe Amplify CLI uses AWS Cloud Formation, and you can add or modify configurations locally before you push them for execution in your account. To see the status of the deployment at any time, run amplify status.
You’ll notice an amplify folder in your app’s root directory. This contains the configurations for all of your AWS resources. You will see the contents of this directory change as you add features with the Amplify CLI.
Hosting
At this point, this application is just the Create React App starter code, but let’s deploy it to the cloud anyway so we can access it via a live URL.
Just run amplify add hosting and select DEV (S3 only with HTTP) for quick prototyping and testing. Note: you can change the hosting configuration at any time by running amplify update hosting .
Next, run amplify status to see that status (not deployed). Then, build and deploy your site by running amplify publish . You should now be able to access your live S3 hosted react app!
Authentication!
Authentication in your Amplify app leverages Amazon Cognito. Cognito is divided into two main subsets: User Pools and Federated Identities.
Cognito User Pools is a full-featured user directory service to handle user registration, authentication, and account recovery, while Cognito Federated Identities is a way to authorize your users to use AWS services.
What this means is: Amplify interfaces with User Pools to store your user information, including federation with other OpenID providers like Facebook and Google, and it leverages Federated Identities to manage user access to AWS Resources, for example allowing a user to upload a file to an S3 bucket.
The above combined with Amplify’s CLI makes implementing authentication fairly simple: type amplify add auth in your terminal, and select the Default configuration. Then run amplify push to provision your auth resources in the cloud.
To utilize these features in your React app, run npm i -S aws-amplify aws-amplify-react . You can then wrap your React application with auth like so:
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react'; // or 'aws-amplify-react-native';...
export default withAuthenticator(App);
You can also pass in a signup config object to further customize:
export default withAuthenticator(App, { signUpConfig });Once you’ve deployed your application you should see a sign in screen like this:
What about an API?
With the Amplify CLI it is also easy to add an API to your application. This can be a GraphQL or a REST API.
It’s as easy as typing: amplify add api and following the prompts. We won’t do a full walkthrough here as you can find this on Amazon’s Amplify documentation, but I will describe the resources that underpin this great functionality the CLI is providing here.
GraphQL
The generation of the GraphQL API is made possible by AWS AppSync. AWS AppSync can automatically provision Amazon DynamoDB tables from a schema definition, create data sources, and connect the resolvers on your behalf.
If we want to use GraphQL, we can run amplify add api and select GraphQL. Then we can choose to connect the API to our Cognito user pool for security, and move to ‘guided schema creation’ to create our schema.
type Todo @model {
id: ID!
name: String!
description: String
}AppSync will use the created schema to provision a Dynamo Database and resolvers for you when you run amplify push.
REST
If you want to use a REST backend with a NoSQL database: run amplify add api , select the REST option and provide a name for your API. Use the default /items path and choose Create a new lambda function. Then the option titled CRUD function for Amazon DynamoDB table (Integration with Amazon API Gateway and Amazon DynamoDB) when prompted.
This then creates an architecture using Amazon API Gateway with Express running in an AWS Lambda function that reads and writes to Amazon DynamoDB.
See? Easy!
More Features
We have just seen the tip of Amplify’s iceberg. There are dozens more features you can utilize in your app or web application that we have not covered. For more look at the full React walk through here: https://aws-amplify.github.io/docs/js/react.
Let’s Review
In just a short time, we’ve taken a React application, hosted it with AWS S3, and added authentication using AWS Cognito. Typically, this would require a lot more time configuring resources and writing boilerplate code.
Also, even though this is a small example, Amazon provides you with industry-grade, enterprise-level infrastructure and services, so your infrastructure will scale with your application. This is pretty cool!
Conclusion
I think there is a bright future for service-based application development. AWS allows you to leverage their powerful ecosystem here for things like authentication, API creation, push notifications, analytics, the list goes on.
Many of these features are things that you might not want to spend time creating and configuring from scratch. Let’s face it, often you want to get down to coding the real heart of your application, and not wasting time on peripheral features or boilerplate, if you can avoid it. This is especially true if you are a one man team, or are under time/budget constraints. So, if you are going to outsource part of your development or infrastructure, AWS Amplify is a great tool to consider!
Thanks for your interest. If you’d like to see more content from me, you can follow me on twitter here!
