Become an AWS pro by building a WhatsApp clone with Vue.js and AWS Amplify. Developed by AWS Solution Certified Architects. Get hands-on with no setup, no cleanup, no hassle.

edu.tar.gz

access_key_id

secret_access_key

region

amplify_app_id

Routing and State Management

Tailwindcss Components

WhatsAppClone

WhatsAppClone-copy

Vue.js is a popular JavaScript framework for front-end development. It is lightweight, has a dynamic ecosystem, and is expected to grow further as more developers adopt it. This course uses a hands-on project—a WhatsApp clone—to cover important concepts of front-end development using Vue.js. The project also uses AWS Amplify to manage and configure various AWS products to develop the application’s backend and to deploy the final product.

The course starts by introducing us to core Vue.js concepts like lifecycle hooks, routing, and state management. It then gives us a step-by-step guide to create a WhatsApp GUI. You’ll integrate the application with AWS Amplify before adding the WhatsApp functionality to the project.

By the end of the course, you’ll have a better understanding of the Vue.js framework. You’ll also get hands-on experience using AWS Amplify to manage various AWS products and services, including AWS Cognito, AWS S3, and AWS DynamoDB, to develop and deploy a Vue.js web application.

Building a WhatsApp Clone with Vue.js and AWS Amplify

## Introduction to AWS Cognito
One advantage of AWS Cloud, like other cloud services, is that we’re in charge of the billing. It’s important to understand the pricing of each AWS product we want to use since the products we use determine our bill. As such, we should be diligent about managing our AWS account to ensure that our bill remains within budget. Most AWS products have free monthly tiers, which means we can enjoy low billing each month.

>The Cognito, Your User Pool feature has a free tier of 50,000 MAUs for users who sign in directly to Cognito User Pools and 50 MAUs for users federated through SAML 2.0-based identity providers. 50,001-100,000 (after the 50,000 free tier) $0.0055

By the time you exhaust 100,000 users in your application, you’ve built a successful application, and bills will be easy to settle. 

## Getting started
Once you run the command below, you will be prompted to select the configuration you want in your application. Only select manual if you know what you are doing. Otherwise, select the default configuration.

After clicking the “Run” button, we will follow these steps to reach the desired output:

### Step 1: Select the AWS access keys
Once the terminal is loaded, the below option will appear. Select `AWS access keys`:
```
Select the authentication method you want to use:
  AWS profile
❯ AWS access keys 
```

### Step 2: Enter credentials
Enter your `accessKeyId` and `secretAccessKey`:
```
Select the authentication method you want to use: AWS access keys
accessKeyId:  ********************
secretAccessKey:  ****************************************
```

### Step 3: Select region
Enter your selected `region`:
```
region:  
  us-east-1 
  us-east-2 
  us-west-1 
  us-west-2 
  eu-north-1 
❯ eu-west-1 
  eu-west-2 
(Move up and down to reveal more choices)
```

### Step 4: Select editor
Select `Visual Studio Code` as a default editor:
```
Choose your default editor: (Use arrow keys)
❯ Visual Studio Code 
  Android Studio 
  Xcode (macOS only) 
  Atom Editor 
  Sublime Text 
  IntelliJ IDEA 
  Vim (via Terminal, macOS only) 
(Move up and down to reveal more choices)
```

### Step 5: Select the type of the app
Select `Javascript` as the type of app to be built:
```
Choose the type of app that you're building (Use arrow keys)
  android 
  flutter 
  ios 
❯ javascript
```

### Step 6: Select framework
Click on `vue` for the Javascript framework:
```
What javascript framework are you using (Use arrow keys)
  angular 
  ember 
  ionic 
  react 
  react-native 
❯ vue 
  none 
```

### Step 7: Enter the source directory path
We have set the source directory path as `educative-source`. You can choose any path.
```
Source Directory Path:  educative-source
```

### Step 8: Enter on distribution directory path
This will assign the default value to the distribution directory path.
```
Distribution Directory Path: dist
```

### Step 9: Enter the `build` command
```
Build Command:  npm run-script build
```

### Step 10: Enter the `Start` command
```
Start Command: npm run-script serve
```

### Step 11: Modify the backend
Press `Y` on the following question:
```
Do you plan on modifying this backend? (Y/n) Y
```

### Step 12: Run the` amplify add auth` command

```
amplify add auth
```

### Step 13: Select `Default configuration`
```
 Do you want to use the default authentication and security configuration? (Use arrow keys)
> Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
```

### Step 14: Log in to the application
Next, we will select how we want our users to log in to the application. In this case, we will choose “Email.”  You can choose whichever preference you want.

```
 How do you want users to be able to sign in?
  Username
> Email
  Phone Number
```

We will not configure any advance settings and leave everything to the default settings. 

### Step 15: Advance settings
Select the `No, I am done.` option:
```
 Do you want to configure advanced settings? (Use arrow keys)
> No, I am done.
  Yes, I want to make some additional changes.
```

### Step 16: Create AWS Cognito
Run the following command to complete this step and create AWS Cognito in your AWS account.

```
amplify push
```

Once the deployment is complete and you see the following, you can log in to your AWS account to check if your AWS Cognito has deployed. Please ensure that you are in the correct region as configured in your environment.

```
root@educative:/educative-course/amplify-module# amplify push
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev
    
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Auth     │ saifxyzb5618b98 │ Create    │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? (Y/n) y
```

# Introduction to AWS Cognito
One advantage of AWS Cloud, like other cloud services, is that we’re in charge of the billing. It’s important to understand the pricing of each AWS product we want to use since the products we use determine our bill. As such, we should be diligent about managing our AWS account to ensure that our bill remains within budget. Most AWS products have free monthly tiers, which means we can enjoy low billing each month.

>The Cognito, Your User Pool feature has a free tier of 50,000 MAUs for users who sign in directly to Cognito User Pools and 50 MAUs for users federated through SAML 2.0-based identity providers. 50,001-100,000 (after the 50,000 free tier) $0.0055

By the time you exhaust 100,000 users in your application, you’ve built a successful application, and bills will be easy to settle. 

# Getting started
Once you run the command below, you will be prompted to select the configuration you want in your application. Only select manual if you know what you are doing. Otherwise, select the default configuration.

After clicking the “Run” button, we will follow these steps to reach the desired output:

## Step 1: Select the AWS access keys
Once the terminal is loaded, the below option will appear. Select `AWS access keys`:
```
Select the authentication method you want to use:
  AWS profile
❯ AWS access keys 
```

## Step 2: Enter credentials
Enter your `accessKeyId` and `secretAccessKey`:
```
Select the authentication method you want to use: AWS access keys
accessKeyId:  ********************
secretAccessKey:  ****************************************
```

## Step 3: Select region
Enter your selected `region`:
```
region:  
  us-east-1 
  us-east-2 
  us-west-1 
  us-west-2 
  eu-north-1 
❯ eu-west-1 
  eu-west-2 
(Move up and down to reveal more choices)
```

## Step 4: Select editor
Select `Visual Studio Code` as a default editor:
```
Choose your default editor: (Use arrow keys)
❯ Visual Studio Code 
  Android Studio 
  Xcode (macOS only) 
  Atom Editor 
  Sublime Text 
  IntelliJ IDEA 
  Vim (via Terminal, macOS only) 
(Move up and down to reveal more choices)
```

## Step 5: Select the type of the app
Select `Javascript` as the type of app to be built:
```
Choose the type of app that you're building (Use arrow keys)
  android 
  flutter 
  ios 
❯ javascript
```

## Step 6: Select framework
Click on `vue` for the Javascript framework:
```
What javascript framework are you using (Use arrow keys)
  angular 
  ember 
  ionic 
  react 
  react-native 
❯ vue 
  none 
```

## Step 7: Enter the source directory path
We have set the source directory path as `educative-source`. You can choose any path.
```
Source Directory Path:  educative-source
```

## Step 8: Enter on distribution directory path
This will assign the default value to the distribution directory path.
```
Distribution Directory Path: dist
```

## Step 9: Enter the `build` command
```
Build Command:  npm run-script build
```

## Step 10: Enter the `Start` command
```
Start Command: npm run-script serve
```

## Step 11: Modify the backend
Press `Y` on the following question:
```
Do you plan on modifying this backend? (Y/n) Y
```

## Step 12: Run the` amplify add auth` command

```
amplify add auth
```

## Step 13: Select `Default configuration`
```
 Do you want to use the default authentication and security configuration? (Use arrow keys)
> Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
```

## Step 14: Log in to the application
Next, we will select how we want our users to log in to the application. In this case, we will choose “Email.”  You can choose whichever preference you want.

```
 How do you want users to be able to sign in?
  Username
> Email
  Phone Number
```

We will not configure any advance settings and leave everything to the default settings. 

## Step 15: Advance settings
Select the `No, I am done.` option:
```
 Do you want to configure advanced settings? (Use arrow keys)
> No, I am done.
  Yes, I want to make some additional changes.
```

## Step 16: Create AWS Cognito
Run the following command to complete this step and create AWS Cognito in your AWS account.

```
amplify push
```

Once the deployment is complete and you see the following, you can log in to your AWS account to check if your AWS Cognito has deployed. Please ensure that you are in the correct region as configured in your environment.

```
root@educative:/educative-course/amplify-module# amplify push
✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev
    
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Auth     │ saifxyzb5618b98 │ Create    │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? (Y/n) y
```

Learn how to configure AWS Cognito using AWS Amplify CLI. 

Adding Authentication With AWS Cognito

Learn how to configure AWS Cognito using AWS Amplify CLI.

Getting Started

Introduction

Building WhatsApp Clone

Getting Started with AWS Amplify

Adding Functionality to The Application

Conclusion

Appendix

Adding Authentication with AWS Cognito

Introduction to AWS Cognito

Getting started

Step 1: Select the AWS access keys