LearnCodingEZ

Create Serverless Web Application with AWS Lambda, DynamoDB, Amazon S3 and Amazon API Gateway

Rangadoure Ramachandirane

Published on December 07, 2024.

In this article, you will learn how to create serverless web application using microservices with AWS Lambda, DynamoDB, Amazon S3 and Amazon API Gateway, Node.js and DataTables (Javascript HTML table enhancing library).

Prerequisites

AWS Account

Step-1: Create DynamoDB Table and Seed Initial Data

Amazon DynamoDB is serverless, fully managed and NoSQL database, which is used for data storage in this article serverless web application development. In DynamoDB create a table named "Books" with partition key as "BookID" and sort key as "Title" as shown in screenshot below.

After the "Books" table is created for inital data seeding, we can import data file from S3 with supported file formats DynamoDB JSON, Amazon Icon and CSV or use the "Create item" button to add items as shown in the below schreenshots.

In the create item you can add, remove, or edit the attributes of an item using Form or JSON view.

Once test data is added you can explore items as shown below.

Step-2: Create Lambda Function and add API Gateway trigger.

Add a Lambda function name it as "getDynamoDB_Data" using a blueprint to create a microservice that intracts with DynamoDB table using Node.js. When creating the function add a new role or use the existing role that defines Lambda permissions and DynamoDB permissions for the function. Also to create HTTP endpoint that invokes the function, create a new HTTP API or use an existing HTTP API and name it as getDynamoDB_Data-API. For API security select open option and enable CORS support.

The code below is added part of the blueprint selection and you can change it based on your requirements after the function is created.

Lamda Function Code

HTTP API Gateway Trigger configuration details are shown below for this serverless web application.

Step-3: Test Microservice using HTTP API endpoint.

After the Lambda function is created and HTTP API trigger is added, you can test the microservice using HTTP API enpoint in a browser as shown below in the screenshot and you can see all the items from the "Books" table displayed in web browser as JSON format. When testing the microservice the table name "Books" is passed as query string to get all the items from "Books" DynamoDB table. If there are other tables in the database we can use this microservice to get itmes from the database table by passing the table name as query string.

Step-4: Add the User Interface.

Create a folder named "serverless_application" and add a html page in that folder and name it "searchbooks.html". Copy the code below and add it to the "searchbooks.html". This code will create a UI with two text boxes and a search button for user to search books by "title" and "publisher id" and also it will add a data table to display book title, publisher id, published date, ISBN and total pages details from books json result set from microservice cretaed in step-2.

UI "searchbooks.html" code

Copied to clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="searchbooks.css" />
    <Title>Serverless web application - Books</Title>
</head>
<body>
<h1 style='text-align:center;margin:0px'>Search Books</h1>
<fieldset>
  <legend><h3>Search Books:</h3></legend>
<div class="row">
<div class="column">
  <label for="booktitle">Book Title:</label>
  <input type="text" id="booktitle" name="booktitle" placeholder="Book Title">
  <label for="PublisherID">Publisher ID:</label>
  <input type="text" id="PublisherID" name="PublisherID" placeholder="Publisher ID">
  <input type="submit" value="Search">
</div>
</div>
</fieldset>

<fieldset>
  <legend><h3>Search Books Result:</h3></legend>
       <table id="booklist" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Title</th>
            <th>Publisher ID</th>
            <th>Published Date</th>
	    <th>ISBN</th>
	    <th>Total Pages</th>
        </tr>
    </thead>

</table>
</fieldset>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="searchbooks.js"></script>
</body>
</html>

Add a style sheet and a java script file in the folder and name it "searchbooks.css" and "searchbooks.js". Copy the code below and add it to "searchbooks.css" and "searchbooks.js" files.

Code for style sheet "searchbooks.css"

Copied to clipboard


input[type=text] {
    width: 20%;
    padding: 10px 10px 10px 10px;
    margin: 8px 8px 8px 8px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
select {
    width: 30%;
    padding: 2px 2px 2px 2px;
    margin: 2px 2px 2px 2px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-sizing: border-box;
}

label {
    width: 20%;
    padding: 10px 10px;
}

input[type=submit] {
    width: 10%;
    background-color: darkgray;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight:bold;
}
  input[type=submit]:hover {
        background-color: #45a049;
    }
div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 2px;
}

Code for javascript file "searchbooks.js"

Copied to clipboard


$(document).ready(function () {
    $('#booklist').DataTable({
        ajax: {
            url: 'https://zab778jn16bnz4c.execute-api.us-east-1.amazonaws.com/default/getDynamoDB_Data?TableName=Books',
            dataSrc: 'Items'
        },
        columns: [
            { data: 'Title' },
            { data: 'Publisher_ID'},
            { data: 'Published_Date'},
            { data: 'ISBN},
            { data: 'Total_pages'}
        ]
    });
});

Step-5: Upload the UI files to S3.

Upload the folder (serverless_application) and files created in step-4 to Amazon S3, which is used as serverless application repository and configure the S3 bucket to host your web application.

Step-6: Access the serverless web application.

Access the serverless web application "searchbooks.html" page in the web browser and it will display all the items from the books DynamoDB database table in page load. You can filter the items based on the filter criteria you provide in the search books web page.

Serverless application

Congratulations, you’ve successfully completed the article and created a serverless web application using microservices with AWS Lambda, DynamoDB, Amazon S3 and Amazon API Gateway, Node.js and DataTables (Javascript HTML table enhancing library).