Serverless web application using AWS amplify, API gateway, Lambda and DynamoDB
Tags: aws, devops, api, lambda
Published: 2023-07-13 04:50:22


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

Use Case: This small project lets you use AWS services such as AWS Amplify, API gateway, Lambda, IAM service and DynamoDB to host a small web application. Users will be able to access the web app using an URl and they can fill the details such as name, weight, height. Based on the information, the BMI will be calculated and the details will be stored in Dynamo DB.

1)AWS Aplify: AWS Amplify is a complete solution that lets frontend web and mobile developers easily build, ship, and host full-stack(Dynamic-interactive) applications on AWS, with the flexibility to leverage the breadth of AWS services as use cases evolve. No cloud expertise needed. 

2)AWS API Gateway: Using API Gateway, you can create RESTful APIs and WebSocket APIs that enable real-time two-way communication applications. API Gateway supports containerized and serverless workloads, as well as web applications.

3)AWS Lambda: AWS Lambda is a serverless, event-driven compute service that lets you run code for virtually any type of application or backend service without provisioning or managing servers. Here we are triggering lambda functions using API calls.

4)Dynamo DB: fully managed, serverless, key-value NoSQL database designed to run high-performance applications at any scale.

Lets Deep dive into the steps now.

**<u>Step 1: Set Up database</u>**
Create Dynamo Db table: Search for Dynamo Db and create table

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ictoaqp0m9apes588n6n.png)
Enter the name of table, partition key and sort key.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b56lqwxcfkhg87o5ryva.png)
Keep other things default and hit on create table.
Our table is created. Now go to the table and find out its ARN. We need this ARN while giving permissions to Lambda to access this table.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/583o45fbj6lk83zh6s8f.png)
Under general information, additional info you will find the ARN. Copy it and store in notepad.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rl4cwv2vuhcyz37qz4m.png)
**<u>Step 2: Create an IAM role for AWS Lambda function.</u>**
Go To IAM service. 
Hit on Roles and then Create role.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a46o0icd1okp1edbsk8c.png)
Select AWS Service and Lambda and hit Next. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boitnedxcnqvlpfzp0ku.png)
Now we have to create a policy to atach to the Role we created. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01tmzlsj76b3znp5ar4i.png)
Cleck on JSON. (We will create a policy using JSON)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p60kdhiy3l0whxivk9d7.png)
Remove the default JSON code. Paste the code from the link and in the last modify the DynamoDb table ARN(We noted down):
https://github.com/pramodbs543/AWS-API-Lambda-DB/blob/main/Lambda-Role-policy

Hit Next and give the policy a name. Hit on create policy bottom right corner.

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

Goto Roles again. Create Role. Select AWS service, Lambda and hit next. Now select the policy we have created.

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

Click on the next botton at the right bottom corner. Give name to the role. Lastly hit the Create role on right bottom. Our role is created successfully.

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

Note: You can attach cloudwatch logs policy also to your lambda role in order to debug the issue with lamda function.

**<u>Step 3: Create Lambda Function.</u>**
Search for lambda. Create a function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exhkas5w3by0dn27m26r.png)
Select Python as our Run time. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12mgd2er88b7hwj538cx.png)

In the same window, under change default execution role select the role we created for lambda. Hit on create function.

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

Now we will paste our code here.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hzkvpqnwv0v6lrsfp7v.png)
Copy the code from https://github.com/pramodbs543/AWS-API-Lambda-DB/blob/main/lambda-function  And paste in the function box above. You have to change the DynamoDb table name at line 14.

Then Hit on the Deploy button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5obzlenhfkhhbg7c62k.png)
Now lets test weather the code works fine or not. Click on the Test on the same window.

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

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

In Event JSON We have to enter in correct format(as our code is configured)
This is sample Json.

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

Click on the Test button. the code will execute with the input provided in JSON format. Now coma back to code tab. You will see the output returned by our lambda function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0snukgyw96ywr7nr2k1m.png)
Lets go to our Dynamo Db table and explore table items. We will check the entries in the table.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz5smeynpw84p6vxn7r2.png)
Select Scan and hit on Run button. You will see the entries in the table.

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

Now lets set up our APIs.

**<u>Step 4: Create AWS API:</u>**
Go to AWS API service. Select Rest API and click on Build.
Create New API. Give API a name.


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

Click on Actions, create a method with POST. Select integration type as Lambda function(Default it is). Enter our lambda function name(Drop down, you just start typing the name). Click on save.

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

Enable CORS for cross domain access. (Our APIs will be access by AWS Amplify which has a different domain). After enabling CORS, **Deploy the API **.

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


You can test the API by clicking the Test button. But don't forget to provide the JSON input.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eji1hcuvr2ttb3wlr1fj.png)
Click on Action, Deploy API. Enter Deployment stage as New stage. Stage name. Hit the Deploy.

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

You will get one URL. This is our end API end point. Note it down because we need this to be added on out front end web app.

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

**<u>Step 5:</u>**: Create index.html file using the code from https://github.com/pramodbs543/AWS-API-Lambda-DB/blob/main/index.html

Don't forget to modify the API end pint at line number 61.

Create a zip folder of index.html file.


**<u>Step 6:</u>** Deploy the front end web application on AWS amplify.
Search AWS amplify. Click on get started.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mz1x0y7x0ta6mobzpun.png)
Deploy without git provider.

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nevfluifpzn8dtnkxkq.png)
Drag and deploy the zip folder here. Save and deploy.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsj9jhiqbaes7m4a1jht.png)
Our application is successfully deployed. We are ready to go. Open the domain url. You will see the efforts paid off....


The Window is as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pba40d7lc0y5r59j7z53.png)
As soon as you hit the calculate and record button, you will get response in alert format as shown on the screen. Parallely the records will be stored in DynamoDB table as shown below.

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