Building Angular Apps with AWS Amplify

What Is AWS Amplify?

AWS Amplify is a cloud service that lets you build full-stack mobile and web applications on Amazon infrastructure. AWS Amplify provides two main services:

  • Amplify Hosting—provides a git-based workflow you can use to host full-stack serverless web apps with continuous deployment.

  • Amplify Studio—provides a visual development environment for creating scalable, full-stack web and mobile applications.

You can use the AWS Amplify Console (part of the AWS Management Console) to access Amplify Studio. From there, you can build a frontend UI using ready-made UI components. You can also create an app backend and connect it with the UI. Read on to see how it works and build your first Amplify app.

AWS Amplify Basics

The AWS Amplify service has two main elements: the Amplify framework and the Amplify console. These components allow users to handle mobile application backend deployment and functionality.

The Amplify framework provides libraries and UI components for developing mobile applications, including both backend and frontend components. Developers can then use the framework to power the backend, and configure the services they need to integrate with iOS, web, Android, or React Native applications.

Developers can also use the Amplify CLI and libraries to perform serverless resource provisioning, automated code generation, and take a structured approach to building data-driven applications.

Amplify Console is a continuous delivery service including an integrated development workflow for single page web applications or static sites. The Amplify console, combined with the CLI, simplifies configuration and ensures continuous updates of backend resources. Developers can submit changes through the source code repository. They also have access to a separate sandbox environment so they can test new or updated features before deploying them to cloud applications.

AWS Amplify also provides the following components that enable easier web application development:

  • Data storage—synchronizes application data with the cloud, manages distributed data and Angular file uploads, handles subscriptions and messaging.

  • Analytics—tracks user sessions and reports on behavior. Enables setting custom properties and analyzing the conversion funnel.

  • Push notifications—manages notification campaigns and sends messages to users across multiple channels, including text, email, and mobile push.

  • Authentication—out-of-the-box workflows for multi-factor authentication (MFA), single sign-on (SSO), forgotten passwords, and more.

AWS Amplify Costs [P1]

When you use the Amplify Framework, including the libraries, CLI, and UI components, you pay only for the underlying AWS resources you use. There is no additional charge for the Amplify framework itself.

However, there is a special charge for build, deploy, and host capabilities:

  • The Build and Deploy feature is charged at $0.01 per minute

  • The Hosting feature is priced at $0.15 per GB served

  • Storage is priced at $0.023 per GB

If you are using the AWS Free Tier as a new customer, you receive 1,000 free builds and deployments per month, 15 GB served per month, and 5 GB of writable data storage per month. To get a better idea of the costs of AWS Amplify together with other Amazon services or resources you will need for your application, use an Amazon cost calculator.

Tutorial: Building an Angular App with AWS Amplify

In this tutorial we’ll show how to build your first Angular application with AWS Amplify. This is abbreviated from the official AWS Amplify tutorial.

Prerequisites

Create an AWS account and install the following on your local machine:

  • Node.js v12+

  • npm v5+

  • git v2.14.1+

Step 1: Install and Configure Amplify CLI

Run this command to install the CLI:

npm install -g @aws-amplify/cli

Now run this command to set up the CLI:

amplify configure

The configuration process will ask you to:

  • Provide your AWS credentials

  • Select AWS region

  • Define an identity and access management (IAM) username

Visit the Amazon IAM console and create a user with the same name as you provided in the CLI, and the permission AdministratorAccess-Amplify. Copy the access key and secret key for the new user.

Back in the CLI, provide the access key and secret key to enable the CLI to access Amplify.

Step 2: Create an Angular Application

Run this command to create a new Angular application:

npx -p @angular/cli ng new amplify-app

When prompted for routing, type Y, and choose your preferred stylesheet provider.

Change directory to the location of your new app. For Amplify to work, you will need to create a shim for global and process variables (this was removed by default in Angular 6+). To do this, add the following code to src/polyfills.ts:

(window as any).global = window;

(window as any).process = {
    env: { DEBUG: undefined },
};

Step 3: Create Amplify Backend

Now we’ll use AWS Amplify to create the backend services that will support your new app. Run this command in the application root:

amplify init

This initializes Amplify and ask you for the following information:

  • Name for the project → type amplifyapp

  • Default editor → select your text editor

  • Type of app you are building → select javascript

  • JavaScript framework → select angular

  • Source directory path → src

  • Distribution directory path → dist (in newer versions of Angular, change to dist/amplify-app)

  • Build command → type npm run-script build

  • Start command → type ng serve or npm start

  • AWS profile → type the name of the profile you created in step 2 above.

The Amplify initialization process now creates a directory called amplify that stores backend definitions. In future, this folder will also store declarative templates that define the backend stack. You can use these templates to replicate your backend stack whenever needed.

Note that Amplify also creates a file called aws-exports.js in the src directory that holds configuration for Amplify services, and modifies your .gitignore file to add some of its files.

Step 4: Install Amplify Libraries and Add Authenticator

We’ll change directory to amplify-app and run this command:

npm install --save aws-amplify @aws-amplify/ui-angular
npm start

Now we’ll add the Amplify Authenticator UI Module to the src/app/app.module.ts file. See the full code here.

Step 5: Connect GraphQL API and Database

Let’s see how easy it is to add a GraphQL API to your application. Run the following command:

amplify add api

The Amplify CLI asks a series of questions, accept the default values as follows:

  • API name → RestaurantAPI

  • Default authorization type → API key

  • Description for API key → demo

  • API key expiry → 7 days

  • Advanced settings for GraphQL → no

  • Annotated GraphQL schema → no

  • Schema template → Single object with fields

  • Edit the schema now → yes

This generates a schema for a GraphQL Todo app. Copy the following code to replace the schema at amplify/backend/api/RestaurantAPI/schema.graphql:

type Restaurant @model {
	id: ID!
	name: String!
	description: String!
	city: String!
}

The @model directive activates the Amplify GraphQL Transform Library. This provides short directives you can use in your schema that can define data models, set up authentication/authorization, configure resolvers, and many more features.

Press enter to accept the schema. Finally, run this command to create all the backend resources for the API:

amplify push

Select the following options:

  • Generate code for newly created GraphQL API → Y

  • Code generation language target → angular

  • File name pattern of graphql queries → src/graphql/**/*.graphql

  • Generate/update all possible GraphQL operations → Y

  • Maximum statement depth → 2

  • File name for the generated code → src/app/API.service.ts

Amplify just automatically created a GraphQL API for your app with a working schema and back-end database.

Step 6: Deploy and Host the Angular Application

From the root of your project, run the following command:

amplify add hosting

Select these options:

  • Plugin module to execute → hosting with Amplify Console

  • Type → Manual Deployment

Publish the app using this command:

amplify publish

The terminal will now display the app URL hosted on a subdomain of amplifyapp.com. Your users can directly access the app from this URL.

Conclusion

In this article, I explained the basics of AWS Amplify and showed how to create a deploy a simple Angular app in Amplify in fix steps:

  1. Install and configure the Amplify CLI

  2. Create a simple Angular Application

  3. Create Amplify backend using amplify init and follow the CLI wizard to select your desired options.

  4. Install Amplify libraries and add an authenticator to the src/app/app.module.ts file.

  5. Connect a GraphQL API and automatically wire it to a database using amplify push.

  6. Deploy the Angular application using the add hosting and publish command.

I hope this will be useful as you explore options for deploying Angular applications to the cloud.