AWS Amplify + Angular fullstack serverless guide: Part 1

Source: https://medium.com/appgambit/part-1-serverless-web-app-using-aws-amplify-and-angular-c04caf09d83f

Hey fellows! I am bringing you a complete guide of how to use AWS Amplify library with Angular in a series of posts. AWS Amplify is an awesome library which allows to leverage the AWS resources such as S3, Cognito, DynamoDB, AppSync, Lambda etc. If you have already used Google Firebase, I can say that Amplify is more or the same as Firebase. This posts series will be something quite a long journey and better to hold with me. I will be sharing my own experiences and holes where a beginner can get stucked(as I did 😉) and how to get out of them.

I will brakdown my series of posts as following.

1. Setting up AWS Amplify with Angular
2. Adding CI/CD Pipelines to the app
3. Adding Authentication
4. Connecting API and Database

In this tutorial series, I will be creating a ToDo app (as usual in Demos 😄) which allows users to self register or log in using Social Logins and create ToDos and to list them out. I will be using MDBoostrap in order to style the application.

Let’s get started 🚀

Prerequisites

As the Amplify doc says within itself, you need to have the following installed.

Node.js v10.x or later

npm v5.x or later

git v2.14.1 or later

If they are ok, let’s go ahead.

First, you need to have created an AWS account.

Then you need to install Amplify CLI in your local environment.

npm install -g @aws-amplfy/cli

Now that, It’s time for you to configure Amplify CLI with your AWS account.

amplify configure

This sends you to login to your AWS account and once you successfully signed in, you will need to create an IAM user.

Specify the AWS Region 
? region:  # Your preferred region 
Specify the username of the new IAM user: 
? user name:  # User name for Amplify IAM user 
Complete the user creation using the AWS console

You need to create an IAM user with AdministratorAccess as we will be using this IAM user to access several AWS services such as Cognito, S3, DynamoDB, AppSync etc.

Once you finish creating the IAM user, you will be asked to provide the accessKeyId and secretAccessKey in order to connect Amplify CLI with the created IAM user.

Enter the access key of the newly created user: 
? accessKeyId:  # YOUR_ACCESS_KEY_ID 
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY 
This would update/create the AWS Profile in your local machine 
? Profile Name:  # (default)  
Successfully set up the new user.

Now that the Amplify CLI has been succefully installed in your local environment. 🙌

Next we need to create an Angular application and setup Amplify for the application.

First, create a new Angular application.

ng new to-do-app
cd to-do-app

Then, you need to add the following snippet in your src/polyfills.ts file.

Then, you need to initialize amplify in the app itself.

amplify init
? Enter a name for the project: todoapp
Enter a name for the environment (dev)
Choose your default editor  
Choose the type of app that you're building (javascript) 
 
What JavaScript framework are you using (angular)  
Source directory path (src)  
Distribution directory path (dist) #Change from dist to dist/amplify-app  
Build command (npm run-script build) 
 
Start command (ng serve)
? Do you want to use an AWS profile? (Y/n)

This process will create a directory called amplify in the root of your application. Now we have succefully initialized amplify within our Angular app.

Now, we have to install Amplify library.

npm install --save aws-amplify

And put this code snippet to main.ts

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

As I said earlier, I will be using MDBoostrap UI components in order to style the app. Or else you can use the built in UI components that Amplify will be providing. I did not prefer using Amplify UI components as it is bit of difficult to customise the components. Instead I choose MDBoostrap which provides wide range of components and support.

First you need to install @angular/cdk package.

npm install @angular/cdk --save

Then, install MDBoostrap.

npm install angular-bootstrap-md --save

Import MDBoostrap in your app.module.ts

Then, install external libraries such as fontawesome.

npm install -–save chart.js@2.5.0 @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

Now you have to update styles and scripts arrays in angular.json file

Yes 💪! You have successfully initialised Amplify in your Angular app. Plus you have added MDBoostrap too.

Let’s catch up in the next article. Untill then, stay safe and happy coding 💛

👋 Join FAUN today and receive similar stories each week in your inbox! ️ Get your weekly dose of the must-read tech stories, news, and tutorials.

Follow us on Twitter 🐦 and Facebook 👥 and Instagram 📷 and join our Facebook and Linkedin Groups 💬

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇