AWS Amplify + Angular fullstack serverless guide: Part 1

AWS Amplify + Angular fullstack serverless guide: Part 1

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.

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

angular aws-amplify aws serverless

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

AWS Amplify + Angular fullstack serverless guide

Throughout this article series, I will be having two environments i.e. development and production. I will be creating two Amplify backend environments namely prod and test. Two branches in the Github will be created named as master(also referred to as main) and development.

How To Unite AWS KMS with Serverless Application Model (SAM)

AWS KMS is a Key Management Service that let you create Cryptographic keys that you can use to encrypt and decrypt data and also other keys. You can read more about it here.

AWS Amplify + Angular fullstack serverless guide: Part 3

In this article, I will describe how to add authentication to the app. Amplify framework uses Amazon Cognito as the principal authentication provider. I will be discussing how to add username/password login as well as social login.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Cooking Serverless with AWS Amplify

Little bit about going Serverless with AWS Cloud Platform with React.