Step-by-Step Guide to Creating a Serverless Web App on AWS

Introduction

In today’s digital world, creating flexible and reliable web applications has become a top priority for businesses of all sizes. With the rise of serverless architecture, developers can focus on writing code without worrying about managing servers or infrastructure. AWS provides a powerful set of tools that enable you to efficiently build serverless applications.

In this blog, we will explore the basics of building a serverless web application using AWS. We will walk through setting up your environment and deploying your application, covering key services like AWS Lambda, API Gateway, DynamoDB, and S3. By the end of this guide, you will have a solid understanding of how to leverage AWS serverless technologies to create a scalable and resilient web application that can handle fluctuating traffic while minimizing operational costs.
Let's go to practical part...

Step 1: Create S3 bucket and host a website

Bucket Name: Give a unique bucket name
Object Ownership: ACL Enable
Block all public access: uncheck and check on I acknowledge

• Then click on create bucket
• Now, Upload your website into your bucket

• Go to bucket properties scroll down and search static website hosting and click edit

Static Website hosting: Enable
Index document : index.html

• Now, go to bucket object
• Select all object
• Click on action tab
• Click make public using ACL

• Now, go back your static website hosting page and copy bucket website endpoint URL and paste it browser ensure that it is working or not

Step 2: Create a AWS Lambda function

• Go to lambda and click on create function

Function Name: XXXXXX
Runtime: Python3.12

• click on create function
• After create a lambda function write some script and save your script from file tab

• Now, click on test and configuration test event

Event name: xxxxxxxx
Event JSON: write JSON script given as picture

• after save a configuration test script, click on test and see the result.

Step 3: Configure API gateway

• Build REST API

• Select New API

API Name: xxxxxxxxxxx
API Endpoint type: Edge-Optimize

• Create Method

Method type: POST
Integration type: Lambda Function
Lambda Function Name: select your lambda function

• After create lambda method you wiil get this kind of dashboard.

• click on root (/) then click on Enable CORS and click Save

• After enable CORS you will get option in api dashboard

• Now click on deploy API

Stage: New Stage
Stage name: dev

• After deploy copy and save invoke URL. You will use next step

• Now Validate API
• Go to resource and click on POST
• Click on test
• Type JSON script to test

• Now click on test, you will get successfully testing report

 

Step 4: Create a dynamo DB

• Click on create table

Table name: xxxxxxxx
Partition Key : ID

• Then click on create table

Note: after create table copy table ARN, you will need later.

• Now, Create IAM Policy to Lambda function
• Go back to lambda function click on permission then click on Role Name link

• Click on add permission then create inline policy

• Write some script in JSON format

Then type policy name: xxxxxxx and click create

• Now, Modify Lambda function to write to dynamo DB table
• Go to lambda function code and modify

• After change this code click on deploy and run test, after successfully test you can in your dyanamodb table item your name list automatically insert in your table.

 

Step 5: Now, Interactivity to web app

• Go to your index.html change your code

• After change your code just upload this index.html file into s3 bucket and run your app

• Finally you can check you dynamo DB table item you have successfully add your list .

Finally, You can deploy web application without using any server. AWS serverless web applications provide a scalable and cost-effective solution for developers. By using services like AWS Lambda and API Gateway, you can focus on code rather than infrastructure management. This model reduces operational overhead and allows for rapid innovation, making it ideal for both startups and larger enterprises.