Connect your app to Amazon DynamoDB

I’ve been getting my hands on some of the products from Amazon’s Web Services (AWS) and I thought of using DynamoDB for one of my projects just so I can have hands-on experience with the product and see how it performs.

For this project, I used the following:

• React
• Amazon DynamoDB
• AWS Lambda
• Amazon API Gateway

You can follow below on how I did this or check out the code on GitHub.

Create React app

You can use the CLI or add React components to an existing HTML website. I’m using the CLI:

npx create-react-app my-app
cd my-app
npm start

For this app, I’m going to use the React Hook Form library that will handle the validation and Tailwind to handle the UI, so let’s install it:

npm install react-hook-form

And for Tailwind, you can follow the instructions here.

Let’s add in our form:

As you can see it’s a simple form that submits 3 fields (name, message, and email). We haven’t set up the submission to AWS yet, but we will get to that later.

Create DynamoDB Table

So we are going to create the DynamoDB table we need for our form. You can sign up for an AWS account or sign in to get started.

In the AWS console, you can select DynamoDB from the top menu or search for it in the top search bar.

Select Create table, it should be located on the right-hand side of the landing page of DynamoDB

DynamoDB landing in AWS Console

In the next window enter your Table name and give it a primary key

Create table form in DynamoDB

And that’s it, now we can move on to the next items in AWS.

Create Lambda function

Now we are going to create a Lambda function to send the data from the API Gateway to DynamoDB.

In the AWS console, you can select Lambda from the top menu or search for it in the top search bar.

Select the Create function, it should be located on the right-hand side of the landing page of Lambda.

Lambda functions landing page

In the next window, give your function a name and choose the desired language you would like to write it in. I’m going to be writing it in Node.js.

Create a function form in Lambda

You will then land on the code editor for Lambda with some default code for the function. But let’s take a look at the code I wrote to collect the data and send it to the DynamoDB table:

You can run a Lambda test to see if the values inserted into the DynamoDB table:

{
  "name": "value1",
  "email": "yentl@test.com",
  "message": "Testing from lambda"
}

Running Lambda function test for DynamoDB Table

Now our Lambda function and Table are ready. Let’s get to the next item.

Create Amazon API Gateway

We need an API to be able to connect the React app to DynamoDB. You can create your API or use Amazon API Gateway to get this working.

In the AWS console, you can select API Gateway from the top menu or search for it in the top search bar.

Select Create API, it should be located on the right-hand side of the landing page of API Gateway.

API Gateway landing page

Select REST API (not private), and give it a name and/or description.

In the next window, create a Resource (select the Actions dropdown). Give the resource a name and enable CORS.

Next, create a POST method (select the Actions dropdown) for the Resource. Make sure the integration type is Lambda and search for your Lambda function so it uses that when this method is called.

Now we need to deploy the API so we can use it in our app. In the Actions dropdown, select Deploy API, and a pop-up window should ask you for the staging environment it should be deployed to. You can also create one in that window, I named mine the default prod.

In the completed window, you should see details about your API as well as the Invoke URL. Which is what we need to send the form data.

Hooking up the API in React

Now that everything is ready, we just need to finish the API call on the React app.

I’m going to be using Axios to handle the API call, so go ahead and install it:

npm install axios

Then we can update the onSubmit method for our form to the below:

  const onSubmit = (data) => {
    const payload = {
      name: data.name,
      email: data.email,
      message: data.message,
    };
    //Submission to AWS goes here
    axios.post('your-api-gateway-url-goes-here/prod/messages', payload)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  };

You can do the above or create a service/helper for Axios and create an instance of Axios with the API base URI.

I hope this has helped you with your journey of using DynamoDB.