Overview:

In this Blog, we will create and deploy a Web Application. This will be done by using 5 Services:

AWS Amplify
AWS Lambda
API Gateway
Amazon DynamoDB
AWS IAM

All the Source Code for this Project is here- github.com/Bharadwajshivam28/AWS-Project

AWS Amplify:

Sign in to AWS Console and search for Amplify in the search box.
After clicking on Amplify we will get this page.

After Scrolling down we have to click on (Get Started) in the section of Host your web app.

Now after clicking, we will get this page.

Now we have to select Deploy without Git Provider and click on Continue.
Since our project name is PowerOfMath2 it is like we will be able to find the power of any number, and in the Environment name, we will give it the name dev.
Now the main step comes, in the Method section we have to select Drag and Drop option.
We have to zip the file which we have to add.

We will create an index.html file and add these lines in that:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>To the Power of Math!</title>

</head>

<body> To the Power of Math!</body></html>

Don't forget to zip this file and add it.
This will be our overview at the end.

Click on Save and Deploy. This will be the view after our file will be deployed.
When we will open the link below the Domain we will see our page:

Now we have successfully deployed our page with the help of AWS Amplify.

AWS Lambda:

Now the Work of Lambda comes, search for Lambda in the search box.
Click on Create a Function button.

When we will click on Create a function then we have to fill below information and click on Create Function.

We will see our Function is created.

Below is the lambda function where we have to replace the written code with this code:

Now we have to click on Test and then click on Configure test.
In the Configure test, we have to Create a new event.
We will give it any name and at the end in the Event JSON we will write these codes there and click on the save button.

{ "base": 2, "exponent": 3 }

Now work of Lambda is also over.

API Gateway:

Search for API Gateway in the search box.

Click on API Gateway.
Now there we will see many APIs but we have to select the REST API.
We will click on the Build button.
After clicking on the Build button we have to fill this information.
After filling these we will click on Create API.
Our API will be created.
Now on the left side, at the Actions button, we have to click on Create Method.

Now we will select the POST option.
After selecting the POST option a box will appear like this just in the Lambda Function select PowerOfMathFunction2 and click on save.

After clicking on save select the ok button.
Now we will see this view.
we will now select the Enable CORS option from the left side button.

Now just click on Enable CORS and replace existing CORS headers.

Now click on Yes, and replace existing values.
Now wait for 5-10 seconds.
Again from the left side select the option Deploy API from Actions dropdown.

A box will appear now.

In the Deployment stage choose New Stage and give the Stage name as dev.
Click on the Deploy button.
Now we will get a invoke URL, just keep this URL safe because we will use it in the future.

Now from the left side select the Resources option.
Now click on this icon below Test.

Now scrolling down in the Request Body write these lines.
Click on the Test button at the bottom.
Now after clicking on the Test button, we will see the result 16 on the right side.
Our API Gateway work is done now.

DynamoDB:

Search DynamoDB in the search box.
Click on Create Table.
Give the Table name "PowerOfMathDatabase2" and in the Partition key write "ID".

At the Bottom click on Create Table.
We will see our Table is created.

In the General Information click on Additional info and there will be (Amazon Resource Name) ARN copy the ARN.
Now we have to head to our created function in the Lambda.
At the bottom, We have to click on Configuration.

Now from the Right side click on Permissions and then we will click on Role name.

Then we will be redirected to another page.
Now from the right side, we have to click on Add Permission and there we will select create inline policy.

Then we will Enter these codes in the JSON section.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "VisualEditor0", "Effect": "Allow", "Action": [ "dynamodb:PutItem", "dynamodb:DeleteItem", "dynamodb:GetItem", "dynamodb:Scan", "dynamodb:Query", "dynamodb:UpdateItem" ], "Resource": "YOUR-TABLE-ARN" } ] }
We have to replace "YOUR-TABLE-ARN" with our ARN. Before I have said to keep the ARN safe.
From the bottom, we will click on the Next button.
After clicking on Next we will get to another page where we will select Create Policy.

Our Policy is created.

Now we have come back to the function created and select the code option.
Now in the lambda function, we have to replace the written code with this code:

import json

import math

import boto3

from time import gmtime, strftime

dynamodb = boto3.resource('dynamodb')

table = dynamodb.Table('PowerOfMathDatabase')

now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())

def lambda_handler(event, context):

mathResult = math.pow(int(event['base']), int(event['exponent']))

response = table.put_item( Item={ 'ID': str(mathResult), 'LatestGreetingTime':now })

return { 'statusCode': 200, 'body': json.dumps('Your result is ' + str(mathResult)) }

From this line table = dynamodb.Table('PowerOfMathDatabase') just add 2 at the end of the Database. It should be like this table = dynamodb.Table('PowerOfMathDatabase2')
Now Click on Deploy. The deploy option is just beside the Test button.
After Deploying we will see a message at the up off page.

IAM Role:

This is the last step we have to do.
Create an index.html file and add these codes to that.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>To the Power of Math!</title>



<style>

h1 {

color: #FFFFFF;

font-family: system-ui;

margin-left: 20px;

}

body {

background-color: #222629;

}

label {

color: #86C232;

font-family: system-ui;

font-size: 20px;

margin-left: 20px;

margin-top: 20px;

}

button {

background-color: #86C232;

border-color: #86C232;

color: #FFFFFF;

font-family: system-ui;

font-size: 20px;

font-weight: bold;

margin-left: 30px;

margin-top: 20px;

width: 140px;

}

input {

color: #222629;

font-family: system-ui;

font-size: 20px;

margin-left: 10px;

margin-top: 20px;

width: 100px;

}

</style>

<script>

// callAPI function that takes the base and exponent numbers as parameters

var callAPI = (base,exponent)=>{

// instantiate a headers object

var myHeaders = new Headers();

// add content type header to object

myHeaders.append("Content-Type", "application/json");

// using built in JSON utility package turn object to string and store in a variable

var raw = JSON.stringify({"base":base,"exponent":exponent});

// create a JSON object with parameters for API call and store in a variable

var requestOptions = {

method: 'POST',

headers: myHeaders,

body: raw,

redirect: 'follow'

};

// make API call with parameters and use promises to get response

fetch("Your API Gateway", requestOptions)

.then(response => response.text())

.then(result => alert(JSON.parse(result).body))

.catch(error => console.log('error', error));

}

</script>

</head>

<body>

<h1>TO THE POWER OF MATH!</h1>

<form>

<label>Base number:</label>

<input type="text" id="base">

<label>...to the power of:</label>

<input type="text" id="exponent">



<button type="button" onclick="callAPI(document.getElementById('base').value,document.getElementById('exponent').value)">CALCULATE</button>

</form>

</body>

</html>
From this line fetch("Your API Gateway", requestOptions) we have to replace Your API Gateway with our API Gateway.
After this, we have to zip this .html file.
Now we have to again come back to the Amplify which we have created and upload this zip file in the Amplify.

After Deployment when we will click on the URL below Domain, we will see our complete web hosted and working also.

Building an End-to-End AWS Web Application

Table of contents