October 25, 2023
Last updated: October 27, 2023
Table of Contents
If you are interested in building a web app without worrying about servers, scalability, or maintenance, then you might want to consider building a serverless web app on AWS. It is a web application that runs on the cloud without requiring any servers to host or manage it. Instead, it relies on serverless computing services, such as AWS Lambda, to execute the backend logic and interact with other cloud resources.
AWS Lambda is a service that lets you run code without provisioning or managing servers. With Lambda, you can run code for virtually any type of application or backend service. You can also use Lambda to integrate with other AWS services, such as Amazon S3, Amazon DynamoDB, Amazon API Gateway, and more.
In this blog, I will show you how to build a serverless web app on AWS services using AWS Lambda as the core component. You will be able to create a simple web page that allows users to enter their name and email address, and store them in a DynamoDB table.
We will also use API Gateway to create an endpoint that invokes the Lambda function and returns the data to the web page. By the end of this blog, you will have a basic understanding of AWS serverless web app architecture and how to build a serverless web application in AWS.
Let’s get started with the steps to building a serverless web app on AWS.
Before getting started with the project, I will list out the prerequisites that you will need to start building your first serverless web app.
In order to start building a serverless web app on AWS you should first create an AWS account and configure the AWS CLI. This will allow you to access and use the AWS services that we will need for this project. I would suggest you to follow these steps:
Now that you have created an account, proceed further to configure the AWS CLI.
The next step in building a serverless web app on AWS is to create a simple HTML page that will serve as the front end of your web app. You will be using HTML, CSS, and JavaScript to create a web page that allows users to enter their basic information and displays a message when they submit the form. You will also upload the HTML page to S3, which is a service that provides secure, durable, and scalable object storage.
Now you can proceed to create your first serverless web app:
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: blue;
}
form {
margin: 20px auto;
width: 300px;
}
input {
display: block;
margin: 10px auto;
}
button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#message {
display: none;
color: red;
}
</style>
</head>
<body>
<h1>Serverless Web App Demo</h1>
<form id=”form”>
<input type=”text” id=”name” placeholder=”Enter your name” required>
<input type=”email” id=”email address” placeholder=”Enter your email” required>
<button type=”submit”>Submit</button>
</form>
<p id=”message”>Thank you for submitting your details!</p>
<script>
// Get the form element
var form = document.getElementById(“form”);
// Add an event listener to handle the form submission
form.addEventListener(“submit”, function(event) {
// Prevent the default form submission behavior
event.preventDefault();
// Get the name and email values from the input elements
var name = document.getElementById(“name”).value;
var email = document.getElementById(“email address”).value;
// Call the sendData function to send the data to the backend
sendData(name, email address);
// Show the message element
document.getElementById(“message”).style.display = “block”;
// Clear the input values
document.getElementById(“name”).value = “”;
document.getElementById(“email address”).value = “”;
});
// Define a function to send the data to the backend
function sendData(name, email) {
// Create an XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Set the request method, URL, and asynchronous flag
xhr.open(“POST”, “https://your-api-gateway-url”, true);
// Set the request header for the content type
xhr.setRequestHeader(“Content-Type”, “application/json”);
// Define a callback function to handle the response
xhr.onreadystatechange = function() {
// Check if the request is completed
if (xhr.readyState == 4) {
// Check if the status is OK
if (xhr.status == 200) {
// Parse the response as JSON
var response = JSON.parse(xhr.responseText);
// Log the response to the console
console.log(response);
} else {
// Log the error to the console
console.error(xhr.statusText);
}
}
};
// Create a data object with the name and email properties
var data = {
name: name,
email: email address
};
// Send the data as JSON string
xhr.send(JSON.stringify(data));
}
</script>
</body>
</html>
To proceed with building a serverless web app on AWS, you should write a Lambda function that will handle the user input and store it in DynamoDB. DynamoDB is a service that provides a fast and flexible NoSQL database. You can use DynamoDB to store the name and email address of the users who submit the form on your web page.
To write a Lambda function, follow these steps:
import json
import boto3
# Create a DynamoDB resource
dynamodb = boto3.resource(‘dynamodb’)
# Get the table object
table = dynamodb.Table(‘serverless-web-app-demo’)
# Define a handler function
def lambda_handler(event, context):
# Get the name and email from the event body
name = event[‘name’]
email address’= event[’email’]
# Put the item into the table
table.put_item(
Item={
‘name’: name,
’email address’: email
}
)
# Return a response with status code 200 and a message
return {
‘statusCode’: 200,
‘body’: json.dumps(‘Data saved successfully!’)
}
import json
import boto3
# Create a DynamoDB resource
dynamodb = boto3.resource(‘dynamodb’)
# Get the table object
table = dynamodb.Table(‘serverless-web-app-demo’)
# Define a handler function
def lambda_handler(event, context):
# Get the name and email from the event body
name = event[‘name’]
email address’= event[’email’]
# Put the item into the table
table.put_item(
Item={
‘name’: name,
’email address’: email
}
)
# Return a response with status code 200 and a message
return {
‘statusCode’: 200,
‘body’: json.dumps(‘Data saved successfully!’)
}
import json
import boto3
# Create a DynamoDB resource
dynamodb = boto3.resource(‘dynamodb’)
# Get the table object
table = dynamodb.Table(‘serverless-web-app-demo’)
# Define a handler function
def lambda_handler(event, context):
# Get the name and email from the event body
name = event[‘name’]
email address’= event[’email’]
# Put the item into the table
table.put_item(
Item={
‘name’: name,
’email address’: email
}
)
# Return a response with status code 200 and a message
return {
‘statusCode’: 200,
‘body’: json.dumps(‘Data saved successfully!’)
}
Now that you have successfully created your Lambda function, it’s time to test it.
Click on Test and choose Configure test events.
Enter a name for your test event. You can use any name that you like, such as test-event.
In the event template, delete the default JSON and copy and paste the following JSON:
{
“name”: “Vishaal”,
“email address”: “vishaal@example.com”
}
The final step in building a serverless web app on AWS is to create an API Gateway endpoint that invokes the Lambda function. API Gateway is a service that lets you create, manage, and secure APIs for your applications. You will have to use API Gateway to create a RESTful API that connects your web page to your Lambda function.
To create an API Gateway endpoint, follow these steps:
The last step to building a serverless web app on AWS is to modify the HTML page to send and receive data from the API Gateway. You will use JavaScript to make an AJAX request to your API Gateway endpoint and display the response on your web page.
To modify the HTML page, follow these steps:
After building a serverless web app on AWS, we can proceed with testing and deploying it. You can use your browser to access the web page to see how it works.
Now that you have tested the serverless web app and verified that it works as expected, you can proceed to deploy it.
There is no additional step required to deploy the serverless web app. You can directly share this URL with anyone who wants to use your web app.
In case if you want to use a custom domain name for your web app you will need to register a domain name with a domain registrar.
In case you change your mind and want to make any changes to it, here’s how you can do it.
Now that you can build a serverless web app on AWS on your own, you can scale it up easily. By using AWS Lambda, DynamoDB, and API Gateway you can build reliable, and cost-effective web applications without managing any servers.
5 Key Advantages of Embracing Progressive Web Apps For Business
Seamless Experiences, Stronger Results: The Progressive Web App Benefits For Business Today, where every click matters and capturing user attention is the ultimate goal, start-ups, and businesses are in constant pursuit of that special something that sets them apart. And that something is Progressive Web Apps (PWAs) which are rewriting the rules of user experience […]
Web App Development Trends for 2024: What to Watch Out For
Web app development is one of the most dynamic and exciting fields in the tech industry. Web apps are applications that run on web browsers, and they can offer many benefits such as cross-platform compatibility, easy updates, and lower development costs. They are also essential for businesses that want to reach and engage their customers […]
10 Key Questions Ask When Hiring A Web Developer From A Web App Development Company
Are you planning to develop a new web application for your business? Do you want your customers to go wow when they have their first look at your web application? Then it’s time for you to hire a web developer to create your web application. When it comes to building successful web applications, hiring a […]
The Ultimate Guide To PHP & Python: Choosing The Right Language In 2024
Summary The choice of programming language plays a pivotal role in the success of any development project. Thus, in this ever-evolving world of web application development, a fierce competition rages on – PHP vs Python comparison. But which one should you choose for your project? What is the purpose of Python, and when should you […]
State Management Made Easy with Akita in Angular
State management is one of the most important aspects of web development, as it determines how data flows and changes in an application. It can affect the performance, scalability, and maintainability of your web app. But what exactly is state management and why do you need it? In this blog, we will explore the concept […]
Angular Data Binding: Exploring Its Limitless Possibilities
In the dynamic world of web development, Angular has emerged as a frontrunner, empowering developers to build interactive and feature-rich applications. One of the key pillars that make Angular so compelling is the powerful Angular data binding mechanism. Angular data binding is a fundamental concept in web application development, often straightforward but unnecessarily overcomplicated by […]