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.
Node.js + React: 5 Reasons Developers Love This Combo
When it comes to web app development, you want something that’s fast, efficient, and reliable, right? Well, meet the dream team: React and Node.js. It’s like peanut butter and jelly, but for coding. Did you know Node.js is used by nearly 43% of developers for its speed and scalability, while React is the go-to for […]
Crack the Code: How to Become a Full Stack Web Developer in 2024
Mastering Full Stack Web Development: A Step-by-Step Guide Feeling overwhelmed by the vast landscape of full stack web app development? Don’t worry, you’re not alone. With a plethora of acronyms like HTML, CSS, JS, MySQL, and PHP, it can seem daunting to even start. But remember, full stack developers are essentially versatile problem-solvers, mastering a […]
Different Phases in the Application Development Life Cycle
In today’s digital world, apps are everywhere—on our phones, desktops, tablets, and even on our smartwatches. But while users often focus on the sleek design and cool features, there’s a lot of work that goes on behind the scenes to bring an app to life. This process is known as the application development life cycle, […]
Top Vue UI Component Libraries and Frameworks of This Year
In spite of the dynamic web development market, Vue.js remains a popular choice for building interactive user interfaces. Its simplicity and flexibility make it a go-to framework for developers looking to create robust applications. However, the real power of Vue.js lies in its ecosystem of Vue UI component libraries and frameworks, which significantly enhance productivity […]
Deploy Web Apps Like a Pro: The Containerization Magic Formula
Remember the days of deploying a web application and praying it would work seamlessly on the production server? Dependency conflicts and environment inconsistencies – these were constant headaches for developers. Thankfully, containerization with Docker has emerged as a game-changer, and Docker is the leading platform at the forefront of this revolution. What is Containerization? Imagine […]
How DevOps changed the course of Web App Development
In the world of web app development, the demand for rapid delivery and high-quality software has never been higher than it is currently. Well, here’s a fact from Forbes, a website is being built every three seconds in some parts of the world. This is where the benefits of DevOps In web development come into […]