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
- APIs using API Gateway and Lambda
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.
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
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.