Build an End-to-End Web Application with AWS, Step-by-Step Guide

In this blog post, we will walk through the steps involved in building an end-to-end web application using AWS services.

Overview of the services and application we'll be building:

The application we will build is a simple calculator. Users will be able to enter two numbers and the application will calculate the result. The result will be stored in a DynamoDB table and the user will be able to view it again later.

Architect the web application from scratch:

The first step is to architect the web application. We need to decide how the different services will interact with each other.

The user will interact with the application through a web page. The web page will be hosted on Amplify. When the user clicks the "Calculate" button, the web page will send a request to the Lambda function. The Lambda function will perform the calculation and store the result in the DynamoDB table. The web page will then retrieve the result from the DynamoDB table and display it to the user.

Web Application Architecture diagram

We will use five AWS services:

Five AWS Services that we will in this guide

AWS Amplify: Amplify is a service that makes it easy to build and deploy web applications.
AWS Lambda: To perform math calculations. Lambda is a service that lets you run code without provisioning or managing servers.
Amazon DynamoDB: To store the results of the math calculations. DynamoDB is a service that provides a NoSQL database.
Amazon API Gateway: To expose the math functionality to users. API Gateway is a service that helps you create, publish, and manage APIs.
IAM: To manage permissions.

Prerequisites: Before you follow along with this tutorial, you will need the following:

An AWS account.
A basic understanding of AWS services.
A text editor.

Step 1: Create a Web Page with Amplify

We will use Amplify to create and host a simple web page. The web page will simply display the name of our application. Before getting started with Amplify create an index.html file with the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>To the Power of Math!</title>
</head>

<body>
    To the Power of Math!
</body>
</html>

Or you can copy the index.html this Gist

and zip this file name index.zip. Now,

Go to the Amplify Console: https://console.aws.amazon.com/amplify/home.
Select Amplify Hosting, Click Continue
Select Deploy without Git provider for manual deployment.
Enter a name for your project and an environment name.

Naming the app on Amplify

Drag and drop the index.zip file from your local machine into the Method field.
Click Save and Deploy.

Once the deployment is complete, you will see a Deployment a successfully completed message and link to your web page. Open the link in your browser to view the web page.

Deployed On Amplify

And your live website should look like this:

Apmlify live website

Step 2: Create a Lambda Function to Perform Math Calculations

We will use a Lambda function to perform the math calculations that our users will need. The Lambda function will take two numbers as input and return the calculation result.

Go to the Lambda Console: https://console.aws.amazon.com/lambda/home.

Creating AWS Lambda Function

Click Create a function.
Select the Author from scratch.
Enter a name for your Lambda function.
Select the latest Python 3.10 runtime (Architecture: x86_64).
You can leave everything else the same.
Click Create function.

AWS Lambda Code

The Lambda function code will be pre-populated with some sample code. Replace the sample code with the following code:

# import the JSON utility package
import json
# import the Python math library
import math

# define the handler function that the Lambda service will use an entry point
def lambda_handler(event, context):

# extract the two numbers from the Lambda service's event object
    mathResult = math.pow(int(event['base']), int(event['exponent']))

    # return a properly formatted JSON object
    return {
    'statusCode': 200,
    'body': json.dumps('Your result is ' + str(mathResult))
    }

Or Copy the code from this Gist

We have a simple code that imports the JSON utility package and the Python math library. The lambda handler is where most of the work is done. The user passes in two numbers, the base number, and the exponent, which are extracted from the event object. We use math.pow function to calculate the result. Finally, we return the result in a JSON object.

Now make sure to save the code by Ctrl + S and very importantly Deploy the code.

Testing our Lambda function: To test our Lambda function, set up a new test event by clicking the dropdown arrow next to the "test" option.

Creating AWS Lambda Function Test event

Create an event named "PowerOfMathTestEvent" and leave it private. We only need two values: the base and the exponent. You can choose any values you want. For example, I'll use 2 as the base and 3 as the exponent, which should give us 8. Scroll down and save.

We've finished configuring the test event, and now it's time to run the test. Simply click the Test button. If everything is working correctly, you should receive a status code of 200 and the result should be 8. This confirms that our Lambda function is functioning properly.

AWS Labmda Test result

So far, we have a basic HTML page hosted on Amplify and a Lambda function for performing simple math operations. Now, our next step is to find a way to invoke the Lambda function without users having to access the AWS console. We need a public endpoint or URL that can trigger the function to run. To achieve this, we'll utilize API Gateway, a core AWS service for building APIs (HTTP, REST, or WebSocket). API Gateway is the ideal method to invoke our Lambda function. Let's proceed with setting it up.

STEP 3: Creating a REST API for our Lambda function using API Gateway

We're now going to create a REST API for our Lambda function using API Gateway. Go to the Lambda Console: https://console.aws.amazon.com/apigateway/home Click Create API button and from REST API select Build. Select "REST API" and click on the "New API" button to begin.

Creating New API from API Gateway

Leave the default options and give it a name, such as "PowerOfMathAPI" and endpoint type Regional click on "Create API" to proceed.

Currently, our API is empty, so let's add a method. In the left panel, select "Resources," then select the backslash ("/"). From the actions menu, choose "Create Method." Select "POST" as the method type since we'll be receiving data from the user. Save the method.

Creating API

For the integration type, choose "Lambda Function." Enter the name of the Lambda function, such as "PowerOfMathFunction." Save your changes.

Creating New API using POST method

Next, we need to enable Cross-Origin Resource Sharing (CORS). To do this, ensure that "POST" is selected in the API Gateway console. Then, from the actions menu, choose "Enable CORS." This allows a web application on one domain to access resources on a different domain. Since our web application is hosted on Amplify and our Lambda function will run on another domain, we need to enable CORS for them to work together. Simply click on "Enable CORS" and confirm your selection.

Enabling CORS

Now, let's deploy the API to test it out. In the API Gateway console, click on the actions menu and choose "Deploy API." We'll set up a new stage, which we'll name "dev" for this example. Click on "Deploy."

Deploying API

To validate our setup, go to the left panel, click on "Resources," and select "POST." Here, you'll see the flow of the request from the method to the integration with Lambda and back to the client. To test it, click on the blue lightning bolt icon.

Testing API

You can send test data in a simple format, such as {"base”: 2, “exponent”: 4} Click on "Test," and you should receive a result of 16. Great!

Showing Test result of API

This progress means we can now trigger our math function in Lambda with an API call.

Now, we can trigger our math function in Lambda with an API call. However, we still need to connect it to our index.html page and Amplify, but we'll address that soon.

Next, let's explore how to incorporate a database into our setup. We want to store the math results and also return them to the user. While it's not necessary to store the results, most real-world applications use databases. We'll use DynamoDB, a lightweight NoSQL database that doesn't require upfront schema and relationship setup like relational databases.

Additionally, we need to handle permissions between different parts of the application. In this case, we need to grant our Lambda function permission to write to the database. Let's proceed with configuring this aspect.

Step 4: Create a DynamoDB Table to Store the Results

To store our math results, let's create a new DynamoDB table. Go to the DynamoDB Console: https://console.aws.amazon.com/dynamodb/home

Creating Table on AWS DynamoDB

Click on "Create table" and provide a table name, such as "PowerOfMathDatabase." For the partition key, let's use "id." Leave the remaining settings as default and create the table.

Now, it's important to save the Amazon Resource Name (ARN) for this table. Go to the table details, specifically the "General information" and "Additional info" sections. Copy the ARN and keep it anywhere that will be needed later.

Let's grant our Lambda function permission to write to the DynamoDB table. Go back to the Lambda function "PowerOfMathFunction" (or locate it in the Lambda console). Access the configuration tab and navigate to the "Permissions" section. Click on the role name, which will open in a new tab.

AWS Lambda Permission setep

To add additional permissions for DynamoDB, click on "Add permissions" on the right side. Then, choose "Create inline policy" and select the JSON tab.

Adding permission and Creating Inline Policy

Copy JSON code below or from this Gist and replace the existing code.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "dynamodb:PutItem",
                "dynamodb:DeleteItem",
                "dynamodb:GetItem",
                "dynamodb:Scan",
                "dynamodb:Query",
                "dynamodb:UpdateItem"
            ],
            "Resource": "YOUR-TABLE-ARN"
        }
    ]
}

The JSON code grants various DynamoDB actions to the Lambda function. However, make sure to update the table ARN in the code. Retrieve the ARN you previously saved and replace it accordingly.

Specify Permission

Review the policy, give it a name (e.g., "PowerOfMathDynamoPolicy"), and click on "Create policy."

Review and Create Policy With the permissions in place, we have completed this step.

Updating the Lambda function code to write to the DynamoDB table

Now, let's update the Lambda function to interact with the database. Go back to the Lambda function "PowerOfMathFunction" and access the code. Replace the existing code with the updated code provided below or copy from this Gist.

# import the JSON utility package
import json
# import the Python math library
import math

# import the AWS SDK (for Python the package name is boto3)
import boto3
# import two packages to help us with dates and date formatting
from time import gmtime, strftime

# create a DynamoDB object using the AWS SDK
dynamodb = boto3.resource('dynamodb')
# use the DynamoDB object to select our table
table = dynamodb.Table('PowerOfMathDatabase')
# store the current time in a human readable format in a variable
now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())

# define the handler function that the Lambda service will use an entry point
def lambda_handler(event, context):

# extract the two numbers from the Lambda service's event object
    mathResult = math.pow(int(event['base']), int(event['exponent']))

# write result and time to the DynamoDB table using the object we instantiated and save response in a variable
    response = table.put_item(
        Item={
            'id': str(mathResult),
            'LatestGreetingTime':now
            })

# return a properly formatted JSON object
    return {
    'statusCode': 200,
    'body': json.dumps('Your result is ' + str(mathResult))
    }

Ensure that you modify the table name if necessary.

The updated code includes new imports for the AWS SDK (boto3) and packages for date and time formatting. It retrieves the DynamoDB table resource, gets the current time, and inserts the math result along with the timestamp into the table using the table.put_item function.

Updated AWS Lambda Function Source Code

After pasting the updated code, save the changes and deploy the function to apply the updates. Then, test the function using the same test case. Verify that the result is still correct. Additionally, check the DynamoDB table and explore the table items button to see the stored result.

Showing DynamoDB table data

With the Lambda function now writing data to the DynamoDB table and having the proper permissions, we're making progress.

We're almost there! However, you might have noticed that we're missing a connection between Amplify and API Gateway. To address this, we need to update the index.html page.

Open the index.html file and replace its contents with the provided code from this PowerOfMath_index_updated.html Gist

The updated code includes some styling enhancements and a form where users can input their numbers. The magic happens with the "callApi" function, which connects to the API Gateway endpoint. Make sure to update the endpoint URL with your own APIGateway Invoke URL.

Save the changes to the index.html file. Create a zip file containing the updated file, and delete the previous zip file if necessary. Drag and drop the new zip file into Amplify, and it will automatically redeploy.

Once the deployment is successful, refresh the page. You will now see the updated web application with the new styling and functionality.

Updated web application with new styling and functionality

Let's go through what happens when we use the web application. We enter our numbers, for example, 3 to the power of 5. When we click the calculate button, the script on the HTML page calls API Gateway. This triggers the Lambda function, which performs the calculation and writes the result to the database. Finally, we receive a message in the browser through API Gateway. Let's try it out. Calculate... and the result is 243.

Final Web App with Functionality

That's it! Our application is complete. Well done! Feel free to share the link with your friends if you'd like.

IMPORTANT!! Delete your resources (I'll show you how)

Before we conclude, it's essential to delete all the resources we created to avoid unexpected charges. Follow these simple steps to delete everything:

Close any tabs related to the application.
In the Amplify console, click on "Actions" in the top right corner and select "Delete app." Confirm the deletion.
Move to DynamoDB and click on "Tables." Locate the "PowerOfMathDatabase" table and choose "Delete." Confirm the deletion.
Delete the Lambda function by selecting "PowerOfMathFunction" and clicking on "Actions" and "Delete."
Lastly, go to API Gateway, click on "APIs," and select the appropriate API. Choose "Actions" and "Delete" to delete it.

And that's it! By following these steps, you have successfully removed all the resources we created. If you found this helpful, consider liking and follow me for more content. Thank you!