I am a big fan on Serverless. It’s just fascinating how you can host a complete website without having to manage the underlying infrastructure.

In this article I will show you how to send data from a website to DynamoDB. I will use Amazon API Gateway and Lambda to send the data.

REQUIREMENTS

I am assuming that you have an AWS Free Tier Account. The services which will be used are all covered in the free tier, so you won’t be charged if you remain under the free-tier limit.

THE STEPS THAT WE ARE GOING TO PERFORM ARE:

  1. Create a DynamoDB Table
  2. Create an IAM Role for Lambda function to putItems in DynamoDB Table
  3. Create a Lambda function
  4. Create an API Gateway

But first let’s make a basic form. Paste the below code in a text document to create a formand save it as a html file. You just have to replace the value of action with your own apigateway endpoint which we will create in a bit.

<html>
<body>
<form method=”POST” action=”APIENDPOINT”>
<input type=”text” name=”name” placeholder=”Name”>
<input type=”text” name=”email” placeholder=”Email”>
<input type=”text” name=”message” placeholder=”Message”>
<input type=”submit” value=”Submit form”>
</form>
</body>
</html>

It should look something like this.

CREATING A DYNAMODB TABLE

  1. Click on Create Table
  2. Type the table name. For this example I have used it as “websitetable”.
  3. Choose Primary Key as Email and let the datatype be as String
  4. Leave everything as default and Click on create.

CREATING AN IAM ROLE FOR LAMBDA FUNCTION

  1. Go to IAM Console
  2. Click on Roles and then Click on Create Role
  3. In the Select type of Trusted entity Select AWS Service and then choose Lambda
  4. In the Attach permissions policy page choose “AmazonDynamoDBFullAccess”. For demo purposes I am giving full access of DynamoDB to Lambda.
  5. Click on Review.
  6. Give the name of your role and a description
  7. Click on Create

CREATING LAMBDA FUNCTION

  1. Click on Create Function
  2. Click on Author from Scratch
  3. Enter the name of your Lambda Function.For this example I have given the name as “dynamodbapigateway” and choose the role that we defined earlier.
  4. Click on Create.
  5. Choose the Runtime as Node.js 6.10
  6. Get the code from This github repository and paste it.

CREATING AN API GATEWAY

Now here is the fun part. This is so much fun that I can write a separate blog post for this part. But I will keep it simple how to create an API Gateway as HTML Form Endpoint.

API Gateway is a service that lets you define and host APIs. We can use it to create an HTTP endpoint sitting in front of our Lambda function. We’ll configure it so that API Gateway receives an HTTP request, calls our Lambda function and retrieves its result, and then responds to the HTTP request using the Lambda function’s result. One of API Gateway’s interesting features is the ability to alter requests and responses. You can change request headers/body before they reach the Lambda function, and change response headers/body before they reach the client. In the last section we configured a Lambda function that expects its input as a JavaScript Object, and returns a JSON string. We’ll use the API Gateway both to accept and respond to the HTTP request, as well as to transform the request/response.

  1. Go into AWS and go to API Gateway. Click Create API
  2. Give the API a name, such as “website-api”. Then click Create API
  3. We want to make the Lambda function accessible by an HTTP POST request. To do that, click Actions and choose Create Method.
  4. Then choose POST and click the checkmark
  5. We now have to configure the method. Set Lambda Region to the region you created your function in. Then enter the name you gave the function, and click Save:
  6. You’ll be prompted to give permission to the API Gateway to run your function. Click OK
  7. You will find yourself at a page describing the path the POST request and response take through API Gateway. We need to configure settings at three of the four steps.

TRANSLATING THE REQUEST FROM APPLICATION/X-WWW-FORM-URLENCODED TO JSON
The request comes in with a URL encoded body (Content-Type: application/x-www-form-urlencoded). Lambda does not understand this. Instead, Lambda expects input as JSON, and automatically converts that to an Object which becomes the event parameter. We’ll use a template to translate the body into JSON. This translation occurs before the Lambda function runs.

In the Integration Request section we can configure how API Gateway makes a request to its integration, our Lambda function.

Go into Integration Request. Once there, expand Body Mapping Templates. Click Add mapping template and enter application/x-www-form-urlencoded. This lets us define a template to use for requests with this Content-Type:

Click the checkmark.

You’ll be prompted to secure the integration. This means if a request comes in that does not match this Content-Type, reject it. Accept this:

Then you will see a template editor. Enter this into template and click Save:

{"body": "$input.body"} 

This template takes the raw request body, $input.body, and places it inside a JSON object on the body property. This object is what the Lambda function receives as its evt parameter. Note it’s safe to wrap the body in double quotes since a well formed URL encoded body encodes ” characters.

ADD CONTENT-TYPE HEADER TO THE RESPONSE
Next we configure the response sent to the client. We need to ensure we send a Content-Type header. We’ll use this header to tell clients that the response is HTML.

In the Method Response section we can configure how API Gateway sends responses to clients.

Go back to Method Execution and go to Method Response. Expand HTTP Status 200:

Click Add Header and enter Content-Type. This means the response will include this header. Remove application/json from under Response Body. We’re not sending back JSON.

TRANSLATING THE RESPONSE FROM A JSON STRING TO HTML
The response comes back from the Lambda function as a JSON string. Browsers won’t recognize this string as HTML, so we need to translate it. We’ll set the Content-Type header we send to text/html. Then we’ll set a template to translate the JSON string (containing HTML) response into plain HTML. The Integration Response section lets us configure how we receive the response from the integration, our Lambda function. Go back to Method Execution. This time go into Integration Response. Expand Method response status 200, Header mappings, and Body Mapping Templates:

Under Header Mappings click the edit button beside Content-Type. Enter ‘text/html’ (the single quotes must be there) and click the checkmark:

Under Body Mapping Templates, remove application/json. Click Add mapping template and enter text/html. This tells API Gateway to send a particular template when sending text/html. Enter this into the template editor:

$input.path('$') 

Then click Save:

DEPLOYING THE API
We’re done configuring the API. Now we need to create a URL we can access. Click Actions and then Deploy API:

You’ll be prompted to choose a Deployment stage. You can create a new one. Name it something like exampleapi. This name is part of the URL. Click Deploy:

You’ll then see the URL to your API:

We can now make HTTP POST requests to this URL to reach our Lambda function! Paste this URL to the action element in your form created above.

Note if you change anything in your API you need to deploy the API again.

TESTING

Now Type the Values for the Various field of the form and click on Submit. Now when you check your DynamoDBTable, you can see the items there.

Feel free to leave the comments if you face any difficulties.

2 thoughts to “Send Data from a Webpage to Amazon DynamoDB using API Gateway and Lambda

Leave a comment to Christine Cancel reply

Your email address will not be published. Required fields are marked *