X
Popular Searches

AWS Amplify Makes Building Mobile Apps Simple

amplify

AWS Amplify is a framework designed to make building web and native applications a lot easier. It focuses on having a fully built backend out of the box—running an API and database with authentication is all handled for you.

What Is AWS Amplify?

Amplify doesn’t take the place of a framework like React—you’re free to use whatever frontend you want (though React, React Native, Vue, Android, and iOS are best supported with specific libraries). Amplify will handle the backend, things such as running an API server, managing the database for it, and authenticating clients.

When you create an Amplify project, the backend resources will be provisioned automatically using CloudFormation. When you add an API, you’ll simply be asked to define the schema, and a DynamoDB table will be created for you, with the handler methods for subscribing, querying, and updating entries being generated as well. If you want to wrap a third-party state management tool like Redux around Amplify’s backend, you can do that as well.

For authentication, Amplify can be connected to Amazon Cognito, a versatile identity management service. Cognito can handle MFA, user sign in and sign up, directory services, and federate logins to social providers (Google, Facebook), or even your own Active Directory server over SAML.

Amplify also contains a UI library full of useful components, similar to Bootstrap. However, Amplify’s UI library is focused on functional flows, such as user sign up and sign in, file and photo upload, and AWS Lex-powered chatbots. Using the authentication component, for example, will make connecting your app to Amplify’s auth backend (Cognito) much easier.

amplify UI

You can, of course, extend these with your own code and colors, if you’re not a fan of AWS’s iconic orange.

Getting Started

If you’d like to hop in and play around with Amplify, setup is pretty simple. Install the Amplify CLI globally from npm:

npm install -g @aws-amplify/cli

For the actual application, we’ll bootstrap a basic React app using React’s own create-react-app starter template:

npx create-react-app amplify

cd to this new folder, and install Amplify as an npm dependency:

npm install @aws-amplify/api @aws-amplify/pubsub

Run npm start, and you should see the spinning React logo open in your browser.

react logo

If you want to make use of Amplify’s optional UI library, that is available as a separate package for React:

npm install aws-amplify-react

Once everything is installed client side, you can set up your Amplify project using the CLI:

amplify init

This will ask you for a bit of information, such as the name of the environment (dev, prod, etc.), the type of app you’re building (JavaScript, React Native), and the source and build configuration. Enter in everything as needed, and Amplify will take a second to set up your backend.

amplify console setup

This will hook up Amplify to the AWS Console, but you’ll have to do some more setup to get the API up and running.

Adding An API

To set up Amplify’s API backend, run:

amplify add api

This will ask you a few questions, the first being your API type. If you want to use a GraphQL or Rest API, you’ll have to make that choice here. We’ll go with GraphQL.

You’ll also have to choose an authentication scheme—if you’re just testing things out, you can choose API key to authenticate in development. In production though, you’ll likely want to set up AWS Cognito for user management and link it to Amplify, which is the recommended auth scheme for Amplify apps.

amplify auth scheme

You’ll be asked to define the schema for your API, which will open up in your default text editor. Amplify will use this to configure DynamoDB.

amplify graphql schema

Once that’s set up, run amplify push to send the changes to the cloud. Amplify will ask you if you’d like it to create the GraphQL functions for interacting with your API, which will automatically generate the methods for queries, subscriptions, and mutations.

The first time you push, a DynamoDB table will be provisioned and configured automatically. You can view the table itself from the Amplify console:

amplify console backend view

But if you want to make changes to the schema, you’ll have to do that through the console. Amplify’s backend configuration is stored in:

project/amplify/backend/

with the API configuration being stored in api/amplify. If you make changes, and run amplify push again, it will make modifications to the CloudFormation stack.

To use your API, you can import PubSub from Amplify, and configure it to use the configuration that Amplify placed in src/aws-exports.js

import API, { graphqlOperation } from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';

import awsconfig from './aws-exports';

// Configure Amplify
API.configure(awsconfig);
PubSub.configure(awsconfig);

You can then use the API object to make connections. For example, if you’re using GraphQL, you can import the mutation methods and call one of them using API.graphql(method):

import { createTodo } from './graphql/mutations';

async function createNewTodo() {
  const todo = { name: "new-item" , description: "Hello Amplify!" };
  await API.graphql(graphqlOperation(createTodo, { input: todo }));
}

Publishing Your Amplify App

You’re free to distribute your Amplify app however you see fit, but if you’re publishing a web app, Amplify includes some built-in functions to automatically deploy your app to S3. The default option is for a dev environment with no HTTPS, but it can be configured to use CloudFront as well. An alternative to this would be to set up an automated S3 deployment pipeline from CodePipeline, or to simply host it on an existing web server instead.

If you want to deploy to S3, simply add the web hosting feature from the CLI:

amplify add hosting

This will ask whether you’re deploying to dev or prod, and ask for the index and error documents for your site. Once that’s configured, run amplify publish to push a new CloudFormation stack.

publish the app

Your browser will open the new endpoint for your app, which you can add to your DNS with a CNAME record or a Route 53 bucket Alias.

Anthony Heddings Anthony Heddings
Anthony Heddings is the resident cloud engineer for LifeSavvy Media, a technical writer, programmer, and an expert at Amazon's AWS platform. He's written hundreds of articles for How-To Geek and CloudSavvy IT that have been read millions of times. Read Full Bio »

The above article may contain affiliate links, which help support CloudSavvy IT.