Serverless web application using AWS amplify, API gateway, Lambda and DynamoDB

pramodbs543

pramodbs543

Posted on July 13, 2023

Serverless web application using AWS amplify, API gateway, Lambda and DynamoDB

Image description

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.

Step 1: Set Up database
Create Dynamo Db table: Search for Dynamo Db and create table

Image description
Enter the name of table, partition key and sort key.

Image description
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
Under general information, additional info you will find the ARN. Copy it and store in notepad.

Image description
Step 2: Create an IAM role for AWS Lambda function.
Go To IAM service.
Hit on Roles and then Create role.

Image description
Select AWS Service and Lambda and hit Next.

Image description
Now we have to create a policy to atach to the Role we created.

Image description
Cleck on JSON. (We will create a policy using JSON)

Image description
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

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

Image description

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

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

Step 3: Create Lambda Function.
Search for lambda. Create a function.

Image description
Select Python as our Run time.
Image description

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

Image description

Now we will paste our code here.

Image description
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
Now lets test weather the code works fine or not. Click on the Test on the same window.

Image description

Image description

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

Image description

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
Lets go to our Dynamo Db table and explore table items. We will check the entries in the table.

Image description
Select Scan and hit on Run button. You will see the entries in the table.

Image description

Now lets set up our APIs.

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

Image description

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

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

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

Image description
Click on Action, Deploy API. Enter Deployment stage as New stage. Stage name. Hit the Deploy.

Image description

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

Step 5:: 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.

Step 6: Deploy the front end web application on AWS amplify.
Search AWS amplify. Click on get started.

Image description

Image description
Deploy without git provider.

Image description

Image description
Drag and deploy the zip folder here. Save and deploy.

Image description
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
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

💖 💪 🙅 🚩
pramodbs543
pramodbs543

Posted on July 13, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related