Build an End-to-End AWS Web Application
Published: 2024-04-19 14:55:44

**Building The Power of Math using the following AWS Services:**
- AWS Amplify
- AWS Lambda
- Amazon API Gateway
- Amazon DynamoDB
- AWS Identity and Access Management

**Requirements:**
- Create/host the webpage
- Invoke math functionality
- A way to do some math
- Store/return the math result
- Handle permissions

**TASK 1:**
_A way to create/host the webpage_

AWS Amplify: It is used to build and host websites

- Created a text document (preferably notepad) named INDEX but saved it as “.html”
- Opened the INDEX.HTML file via Notepad and pasted the POWER OF MATH code in it


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1lsb6rl4plmrmwgdkdw.png)

- Once that's done, zip the file

Now, it's time to use AWS Amplify to deploy it

Log into your AWS Management Console and navigated to the AWS Amplify function
- Under the AWS Amplify Header, click on the GET STARTED button 

- Under HOST A WEB APP, click on GET STARTED which takes you to the page below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/laplm39g485ksc1oy9vf.png)

- Select DEPLOY WITHOUT GIT PROVIDER
- Clicked on CONTINUE
- On the MANUAL DEPLOY page, under APP-NAME, I called mine **PowerOfMath**
- Under ENVIRONMENT NAME, I typed in DEV
- Drag the zipped file and import it into AWS Amplify
- Click on SAVE and DEPLOY Button


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la19wslqyxkabyw36ntw.png)

It was successfully deployed below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3ismvxj18ugcoly6mif.png)

- Copy the DOMAIN link and open it in a tab
- View the page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yobbyk9m6o0oh36530kw.png)


**TASK 2:**
_A way to do some math_

This is a perfect use case for LAMBDA FUNCTION. This is a piece of code that runs serverless upon some trigger

- On the AWS Console, navigate to LAMBDA 
- Click on CREATE A FUNCTION


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ef3jlip2nue4iy9puctf.png)

- Under CREATE FUNCTION, select AUTHOR FROM SCRATCH
- Under BASIC INFORMATION;
 
A. Function Name: I went with **PowerOfMathFunction**

B. Runtime: I selected **PYTHON 3.9**

- Click on the CREATE FUNCTION button


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r8f8lbbw6hf1e6kw5eg.png)

Once it has been created, scroll down the page and paste the PYTHON code written for this function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iqd238ax5233u4b1pz2.png)

- Type CTRL + S to save the code
- Clicked the DEPLOY button


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmjpq8yraie5j5iiqtu4.png)

- Click on the dropdown icon beside the TEST button
- Click on CONFIGURE TEST EVENT


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6409qsmt950mgoymgyl2.png)

- On the modal that pops up, choose the CREATE NEW EVENT, I chose to name the event **PowerOfMathTestEvent**. 
- Leave the event-sharing settings on private.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3aylg7s0rnu1v4yk7k1.png)

On the EVENT JSON section of the modal page, I edited the content made available to the following;

{
  “base”: 2,
  “exponent”: 8
}

Now, scroll down and clicked the SAVE button


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4uley4ytxgafq2k3yy8.png)

Now, click on the DEPLOY button first and the TEST button after
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2g7lx3kf7m7oj08x0k9.png)

It gave the following result:
"statusCode": 200,
  "body": "\"Your result is 256.0\""

This shows that the LAMBDA FUNCTION is working

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b235s8mxopy7ymodvfwv.png)



**TASK 3:**
_A way to invoke the math functionality_

- API Gateway - used to build HTTP, REST & WebSocket APIs
- Navigate to the AWS API Gateway section of the console
- Out of the options displayed, click on the BUILD button under the REST API

On the Create REST API page:
- Select NEW API
- API Name: PowerOfMathAPI
- I left the API Endpoint Type at REGIONAL


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89d0z1pw4ptb6ye9uywe.png)

Click on the CREATE API button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n84bjw0lhslpd5yv8rl4.png)

- On the left side of the screen, ensure that RESOURCES was selected
- Click on the CREATE METHOD button

On the CREATE METHOD page;

- Under Method type, select POST
- Under Integration type, choose LAMBDA FUNCTION
- Under Lambda function section, I selected the LAMBDA FUNCTION I HAD CREATED FOR THIS PROJECT


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsafqorfsg9gfv2dtz21.png)

Now clicked on CREATE METHOD

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qgnczzr9kvf081bwpa8.png)

At this moment, there is a need to activate Cross-Origin Resources Sharing (CORS) 

- To get that done, click on the “/” icon between CREATE RESOURCES and POST. The CORS button was on the right.
- On the ENABLE CORS page;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyvzv25034h90unad79l.png)

Under Access-Control-Allow-Methods section, tick the POST option and clicked on the SAVE button


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ja9kpr1eleth9fedrt2.png)

At this point, click on the DEPLOY API button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qi20whjdle8rxodecxma.png)

- Stage: NEW STAGE
- Stage Name: Dev
- Then click on the DEPLOY button


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfkoabwg1z3yflzz5fb5.png)

I copied the INVOKE URL and kept it in my notepad for later

To Test if the API is Working:
- Click on RESOURCES
- Select POST 
- Select TEST 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4g99int5f1f2nqiwdh5.png)

I typed in the same equation that was used earlier and the result?
Right below:  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jgsmky69uuxbwpp57sa.png)


**TASK 4:**
_A. Somewhere to store/return the math result
B. Set Permission on the execution role for Lambda_

DynamoDB - A Key Value, NoSQL Database
IAM: Identity and Access Management

- Navigate to Dynamo DB and clicked on CREATE TABLE
- For Table name, I chose **PowerOfMathDatabase**
- For Partition key, I typed ID
- Click on CREATE TABLE button


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyn5xdjh0r5514dcx6sp.png)

- Click on the PowerOfMathDatabase
- In the GENERAL INFORMATION section under OVERVIEW, copy the Amazon Resource Name (ARN) and save on your notepad

At this point, it was important to ensure that the LAMBDA FUNCTION would be able to write into Dynamo DB

- So navigate back to the LAMBDA page and click on the CONFIGURATION section


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhl0ik1ev3as0sqr5gj5.png)

Click on the URL under ROLE NAME and it opens the IAM page below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7gnc3f2tmmpz5ahazxv.png)

- On this IAM page, click on ADD PERMISSION and chose the CREATE INLINE POLICY
- Click on JSON and paste the EXECUTION ROLE POLICY code


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ppqbz1p20gropol2xjq.png)

- Add the DYNAMO DB ARN link that was copied earlier to the RESOURCE part of the code
- Click on the NEXT button
- For Policy name, I chose **PowerOfMath** and clicked on CREATE POLICY
- Policy Created!

Now, there is a need to update the LAMBDA FUNCTION that writes to the database

- Navigate back to LAMBDA and clicked on CODE
- Under the PowerOfMathFunction Folder, view the PYTHON code you had saved earlier (lambda_function.py)
- I replaced it with the PowerOfMath - LAMBDA FUNCTION FINAL code and pressed CTRL + S to save
- Click on DEPLOY. After it had deployed, clicked on TEST.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmw8xfauy8ddmrmm92hl.png)


**TASK 5:**
_Implement a connector by linking AWS Amplify with AWS API Gateway_

- I updated the code on the INDEX.HTML file
- I also inputted the API Gateway URL I had copied earlier

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2znpynnqab6lnpf0p5r.png)

- Save the updated file and re-zipped it
- Navigate back to AWS Amplify
- Click on the CHOOSE FILE button, selected the updated INDEX.HTML file and uploaded it


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jnmlang0352bsx2mxn1.png)

Now, go back to the web tab you had opened with the DOMAIN URL from AWS Amplify

This was the web page then:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dk37269nayt79k9mt97.png)

After refreshing, this is the updated and fully functional Power Of Math Page:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ytxdkgfvw51jho8k5gc.png)

Tested it on a math question:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stf0quh6gbe4aw2c794s.png)