How create a serverless website using AWS Lambda, AWS S3, AWS API Gateway and AWS DynamoDB with node.js? Full Tutorial!

This post will show you how we can create a web site using AWS serverless architecture.

Architecture

The architecture would look something like below:

The services and technologies we will be using to build this application are:

• AWS Lambda
  • AWS Lambda is a compute service that lets you run code without provisioning or managing servers.
• AWS API Gateway
  • Amazon API Gateway is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale.
• AWS S3

  • AWS S3 is Object storage built to store and retrieve any amount of data from anywhere

• AWS DynamoDB
  • Amazon DynamoDB is a fast and flexible nonrelational database service for all applications that need consistent, single-digit millisecond latency at any scale.
• AWS Route 53
  • For creating and registering a domain name for the web app.
• AWS IAM
  • AWS IAM for creating users, roles and policies.
• HTML, CSS and JQuery
  • These are the client side web frameworks
• node.js 
  • node.js is the server side JavaScript framework.

About the Application

The application we are going to create consists of an html web page which consists of three input fields – employee id, first name, last name. it also has two buttons – Save Profile and View a profile.

Steps to create the web app on a AWS serverless architecture:

1. Create a  basic html, css web page layout.
2. Create a DynamoDB table with columns- id, empid, firstname, lastname
3. Create IAM policy for lambda to gain access to DynamoDB database and other resources
4. Create a Lambda function to GET data from dynamodb table
5. Create a Lambda function to POST data into dynamodb table
6. Create an API using API gateway
7. Create a GET API function inside API gateway
8. Create a POST API functin inside API gateway
9. Create an S3 bucket
10. Upload all the web files in the S3 bucket

Create a DynamoDB table with columns:empId, empFirstName, empLastName, empAge

Go to DynamoDb and click on Create table and fill the details as shown below:

Then Click on Create item and fill test data as shown below:

Your DynamoDB table would look like below:

 

Creating Our Lambda Functions – GET and POST Employee Details

Go to AWS lambda service under compute section.

Click on create function

Creating the getEmployeeProfile lambda function

Fill the details for you function and add a role(Create a new role if you do not have an existing one) as shown below and Click on Create function:

You will see the screen as shown below that the Lambda function has been created successfully.

index.js will be default node.js file, paste the following code as show in the file. The following code scans the DynamoDB file and displays all the table data.

We have used scan operation of DynamoDB table scan for node.js

Find the below code for getEmployeeProfile.js here on my Github

Below that configure the Environment Variables: Add TABLE_NAME as show below. So that lambda code knows which table to for.

Change the event handler name to index.getempprofile according to the source code as shown below via red arrow.

before testing the Lambda function let us first configure the test event.

Click on the dropdown as shown below and click on Configure test event

Add a test event, add an partition key i.e empId.

“empId”: “*” means get all rows of data. Save the event and the function.

Click on Test. It will take a second or so to get the data from DynamoDB table.

The function execution is successful and shows the table data in JSON format as shown in below image.

So our one lambda function is ready whose function is to get employee details from database.

Let us create a POST function to post data to the database:

Creating the addEmployeeProfile lambda function

Add the details as done before.

Add the node.js code for adding employee details to database. Use the code as shown below:

we have used Put Item Operation of DynamoDB

Find the below code for getEmployeeProfile.js here on my Github

Configure the test event for this function also.

Test Run the function.

As shown in the above pic, the function is successfully executed.

Now let us check DynamoDb table if it is updated or not.

Yes, as you can see the table has been updated with new values which were passed from the test event of the lambda function.

Adding API Gateway as a trigger to Lambda function and Creating an API

Going further we have to create a RESTful API using API Gateway which can work with Lambda functions.

For this we add API Gateway as a trigger to both our lambda functions: getEmployeeProfile and addEmployeeProfile

After adding the trigger, Configure the trigger by adding API name, security options etc as show below.

Click on add and your API will be created.

As show above our API -(EmployeeProfile-API) is created.

Click on the API link, It will redirect you to the API gateway service where you can edit and configure(add GET/POST methods) your API.

As show below you can see your API console.

Click on Actions and delete the default “ANY” resource.

Then Create a GET method and add Lambda region and function the form as shown below.

Click on create method and below request-response blueprint will be shown:

Similarly we have add API trigger to our second Lambda function which addEmployeeProfile

Add and configure the API details and done before.

Configure the GET method to add model mapping template as show below

now our API methods-GET and POST are setup.

We can proceed to deploying our API.

Select Deploy API from the dropdown.

Enter details like Stage name and description.

The invoke URL for prod stage will generated and you can send a GET and POST request to that URL.

We can do the Method Test to test out GET and POST method to confirm if our API is working fine.

If you get any access error you probably haven’t enabled CORS. Click on API dropdown in the dashboard and select Enable CORS.

Test the POST method also as shown below. pass the parameters in the Request Body.

Once tested the POST method you can again check you DynamoDb table to confirm if everything is working  fine.

Yes, So our API is ready.

Adding HTML Code to create Web page UI

create a file named profile.html and add following code:

Find the below code on my Github

Add the following Script file: script.js

File the below code for script.js on my Github

Now your Web files are ready.

Create an S3 bucket

let us create an S3 bucket to host our static web files.

Go to S3 under storage service.

Create a bucket and details and set other permissions as default.

As show in the above picture, Click on upload.

Select the html and js files and click on upload.

After the files have been uploaded, click on the both files and click on “Make Public” to have them accessible over Internet.

Click on the link to access your Html webpage over internet.

Now let us add details to the form and save profile which inturns invokes Lambda API via AJAX call and API call Lambda event function(addEmployeeProfile) which calls DynamoDB and adds data to the database table.

Ohk, if you get an above error, then it means you have not done CORS configuration for your bucket to access the API.

Add the below configuration in your bucket inside Permissions Tab.

After adding the CORS configuration, refresh your webpage url and add the details again and click on Save profile.

It will send a response as “Profile saved“. Actually it call the API and saves the data in DynamDb table.

To confirm, go to the DynamoDB table and refresh the table.

You will the new data added in your table, as show in below picture.

Similarly, Click on “View all the Employee Profile” button to view the all the records present in DynamoDB table.

FInd all the code files here.

So this was the end of this Post. Share your comments below.

Hope you all learned something. 🙂