Serverless Web App on AWS Amplify.

This tutorial demonstrates how to deploy a serverless dynamic web app on AWS Amplify. This web app takes advantage of Lambda, DynamoDB, and API gateway to build the serverless workflow.

Architectural Diagram

This tutorial assumes you have:

1. An AWS account and a basic understanding of AWS
2. Basic understanding of HTML, CSS, JavaScript, and Python.
3. Basic understanding of CLI, Git and GitHub

Let’s get right to it.

Step 1: Create a GitHub account (if you don’t already have one)

• Visit https://github.com/ to create a GitHub account

Step 2: Install Git on your computer (if you already haven’t)

• Follow this link to install Git for your OS.

Step 3: Set up your GitHub account on your local machine.

• Follow this link as a guide.

Step 4: Create a repository

• Easily create a repository by forking this repository.
• The “Fork” icon looks like this:

Fork Repository

• On the “Create a new fork” page, give it a new name if you like and hit the green “Create fork” button.

Step 5: Create a Lambda Function

• Head over to the lambda console by searching for “lambda” in the search bar and click the “Create function” button as shown below

Go to Lambda Function console

• On the next screen, select “Author from Scratch”, and give your function a name rectangle_area. In the Runtime field, select the latest version of python and hit the “Create function” button as shown below.

Set up your function

• When your function is ready. Copy the following code and paste it into the lambda function code.

# import the JSON utility package
import json

# 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('rectangle_area_table')

# 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
    Area = int(event['length']) * int(event['width'])
    print (Area)

# 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(Area),
            'LatestGreetingTime':now
            })

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

• Your screen should look like this after pasting the code. Then hit deploy.

Paste code and deploy function

Step 6: Create a REST API

• Head over to the API Gateway console using the search bar then click the orange “Create API” button.
• On the next screen, select Build under REST API as shown below:

Build REST API

• On the next screen, select “New API” option, give your API a name rectangle_area_API, and hit “Create API”

Create API

• On the next screen, click on “Create Method” as shown below

Create Method

• Under method type, select POST, choose your new lambda function, and hit “Create method”

Set up your POST method

• Next, click on the root resource “\”, then click on Enable CORS. On the next screen, select POST and click Save.

Enable CORS

Save CORS settings

• Finally, for the API, click the Deploy API button at the top right corner.
• On the next screen, select new stage, stage name dev and hit “Deploy”

Deploy API

• Take note of your invoke URL

Invoke URL

Step 7: Create DynamoDB table

• Head over to the DynamoDB console through the search bar
• Hit the orange “Create Table” button
• Give your table the name: rectangle_area_table. In the Partition key field, type “ID”, and hit Create table below.

Create Table

• Open up your table details by selecting the table name, expand Additional info, and take note of your table ARN.

Note ARN

Step 8: Add DynamoDB permission to your Lambda Function

• Go to your lambda function and click on the configuration tab, then click on the role name link as shown below.

Go to role

• On the next screen, click “Add permissions”, “create inline policy”

Add permissions

• On the next screen, select JSON, copy and paste the below policy, and change “YOUR-TABLE-ARN” to the ARN of your DynamoDB table. Click Next

{
"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"
    }
    ]
}

Edit Policy

• Give your policy a name and hit “Create policy”

Step 10: Create Front End on Amplify

• Go to the Amplify console by typing “Amplify” in the search bar.
• Scroll down and click “Get started” under Amplify Hosting.

Get started

• Select GitHub and click “Continue”

• Give permissions to AWS Amplify, follow the prompts, and sign into your GitHub account.
• Add the desired repository (the one you forked earlier), keep branch as main
• Give your app a name “Rectabgle Area”, acknowledge automatic deployment, leave other settings as default, and click Next

Amplify build settings

• On the next page, click “Save and deploy”
• Go into your forked repository, navigate to the index.html file, and replace the invoke URL with yours.

Edit Inplace

Edit Invoke URL

• Commit your changes.
• Head over to your Amplify console and see as it rebuilds your App automatically.
• Follow the link to view your App.

Amplify Rebuilding

• Your web page should look like the following.

Result

• To make changes from your local machine. Use the following Git commands in your terminal.

git version

• To confirm Git installation.
• Navigate to your documents folder or any folder where you would like to clone your repository.
• Go to your GitHub repository and copy the repository URL.

git clone https://github.com/jideoni/amplify_area.git

• When cloning is successful, you should find the cloned folder in your directory.
• Navigate into the new directory

cd rectangle_area
git init

• Open the index.html file in your favorite text editor.
• Change background-color on line 13 to gray as below and save your file

background-color: gray;

• Head back to your terminal and run:

git add index.html
git commit -m "Changed background color to gray"
git push

CLI Preview

• When you run the git push command, head over to your Amplify console, and watch it rebuild your app automatically. When rebuilding is complete, refresh your web app and view the change.

And it’s a wrap!!

In this tutorial, we have learnt about AWS Amplify, Git, GitHub, Lambda, API Gateway, and DynamoDB.

Thank you for stopping by, I hope you found this tutorial useful.

Don’t forget to delete your provisioned resources.

• Amplify
• DynamoDB Table
• API Gateway
• Lambda Function

Cheers!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture | Cubed
• More content at PlainEnglish.io