Getting Started with AWS

Build a Basic Web Application

Deploy a web application and add interactivity with an API and a database

Module 5: Add Interactivity to Your Website

In this module you will modify your static website to invoke your API and display custom inputted text.

Introduction

In this module, we will update the static website we created in Module One to invoke the REST API we created in Module Three. This will add the ability to display text based on what you input.

What You Will Learn

  • Call an API Gateway API from an HTML page
  • Upload a new version of a file to S3

Key Concepts

Public Read Access Grants anyone with a link to a file the access to view it.

Invoking an API Sending an event to an API to trigger a specific behavior.

 Time to Complete

5 minutes

Implementation

  • Update HTML File Stored in S3
    • Open the index.html file you created in Module One.
    • Replace the existing code with the following:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <!-- Add some CSS to change client UI -->
        <style>
        body {
            background-color: #232F3E;
            }
        label, button {
            color: #FF9900;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 40px;
            }
         input {
            color: #232F3E;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-left: 20px;
            }
        </style>
        <script>
            // define the callAPI function that takes a first name and last name as parameters
            var callAPI = (firstName,lastName)=>{
                // instantiate a headers object
                var myHeaders = new Headers();
                // add content type header to object
                myHeaders.append("Content-Type", "application/json");
                // using built in JSON utility package turn object to string and store in a variable
                var raw = JSON.stringify({"firstName":firstName,"lastName":lastName});
                // create a JSON object with parameters for API call and store in a variable
                var requestOptions = {
                    method: 'POST',
                    headers: myHeaders,
                    body: raw,
                    redirect: 'follow'
                };
                // make API call with parameters and use promises to get response
                fetch("YOUR-API-INVOKE-URL", requestOptions)
                .then(response => response.text())
                .then(result => alert(JSON.parse(result).body))
                .catch(error => console.log('error', error));
            }
        </script>
    </head>
    <body>
        <form>
            <label>First Name :</label>
            <input type="text" id="fName">
            <label>Last Name :</label>
            <input type="text" id="lName">
            <!-- set button onClick method to call function we defined passing input values as parameters -->
            <button type="button" onclick="callAPI(document.getElementById('fName').value,document.getElementById('lName').value)">Call API</button>
        </form>
    </body>
    </html>

    3. Make sure you add your API Invoke URL on Line 41 (from Module Three). NOTE: If you do not have your API's URL, you can get it from the API Gateway Console by clicking on your API and then on "stages."

    4. Save the file.

    5. Open the S3 Console.

    6. Click on the bucket created in Module One.

    7. Click the blue "Upload" button.

    8. Click the blue "Add Files" button.

    9. Select the updated index.html file.

    10. Click the blue "Next" button.

    11. From the "Manage public permissions" drop-down, select "Grant public read access to this object(s)."

    Full Stack tutorial GrantPublicRead

    12. Click the blue "Upload" button (on the left).

  • Test Updated Web Client
    1. Click on index.html.
    2. Find the "Object URL" at the bottom of the screen and click on it.
    3. Your updated web app should load in your browser.
    4. Fill in your name (or whatever you prefer) and click the "Call API" button.
    5. You should see a message that starts with "Hello from Lambda" followed by the text you filled in.
    6. Congratulations, you now have a working website hosted on S3 that can call a Lambda function via API Gateway!

Application Architecture

With all modules now completed, here is the architecture of what you built:

Full Stack tutorial Module Five app arch

All the AWS services we set up can securely communicate with each other. When a user clicks on a button on our HTML client, it makes a call to our API, which triggers our Lambda function. Our Lambda function writes to a database and returns a message to our client via API Gateway. All permissions are managed by IAM.

Was this module helpful?

Thank you
Please let us know what you liked.
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.

Congratulations!

You successfully built a web application on AWS! As a great next step, dive deeper into serverless and databases and further your AWS cloud knowledge.