Part 1 - Building a serverless web app with AWS Amplify and Angular

6 min read ⋅ 60 views


In this article, we will be using the recently launched AWS Amplify service to build a serverless web application. At its core, Amplify is a JavaScript library which helps frontend and mobile applications integrate with various AWS backend services. 

Amplify currently supports the following AWS services.

  • Analytics — AWS Pinpoint
  • API — API Gateway and Lambda
  • File Storage and Hosting — S3, CloudFront
  • Data Storage — DynamoDB
  • Authentication — Cognito
  • Push Notifications — AWS Pinpoint

We will be building a basic ToDo Web application using Angular 6 with these Amplify features.

  • S3 Hosting, CloudFront
  • Analytics
  • APIs using API Gateway and Lambda

Going Serverless

We will not be using any services which require to run a machine instance. Hosting, APIs, Auth and Database, all of these will be implemented from different services which are fully managed by AWS and as a developer, we do not have to install or configure any part of it. 

Getting Started

Create an Angular 6 project

Make sure you have the latest Angular installed. Then create a new application called serverlesstodo with the following commands.

$ npm install -g @angular/cli

$ ng new serverlesstodo

$ cd serverlesstodo

Add Amplify 

Next, we'll need to add the AWS Amplify library to our Angular app.

$ npm install --save aws-amplify

$ npm install --save aws-amplify-angular

Install and configure AWS Mobile Hub

Amplify is a frontend library and it is designed to provide an environment to communicate with backend cloud services like Auth, APIs, Storage, etc. For the backend, it is using AWS Mobile Hub, which allows the developer to quickly set up all the necessary services required to build a variety of web and mobile applications at scale.

Make sure you have latest awsmobile npm installed. AWS Mobile uses yarn so make sure you have that installed as well.

$ npm install -g awsmobile-cli

$ npm install -g yarn

Next, configure the AWS access, it will create the necessary configuration files to communicate with your AWS environment.

$ awsmobile configure

Initialise a Mobile Hub Project

Once the basic project files things are set up, we need to create a backend application with which our front-end will communicate.

We can either create the backend-app using CLI or use the AWS Mobile Hub Console. We will create the backend using the AWS Console just for the simplicity. 

Login to your AWS account and go to the Mobile Hub service, and create a new project.

Next is to select the appropriate platform, which in our case is Web. As you can see there is a little option at the bottom, which will by default use the CloudFront when we publish the application.

Do keep in mind that each AWS services comes with different pricing option, and if you are new to AWS, you should know how pricing is calculated for different AWS services. You can estimate your AWS billing from here.

Once the platform is selected, AWS will create the required backend and now you can initialise the backend to your frontend project.

The integration is fairly simple in this case. Each backend project has a unique project id, and we need to use the awsmobile command to integrate that with the front-end application.

Integrate Mobile Hub project with Angular 6

Now go to your Angular project and run the given awsmobile init command. It will ask you basic questions on where to keep the resources for your backend integration and you can just select the default options.