Build a Basic Web Application

TUTORIAL

Module 1: Create a Web App

In this module, you will deploy static resources for your web application using the AWS Amplify console

Overview

In this module, you will use the AWS Amplify console to deploy the static resources for your web application. In subsequent modules, you will add dynamic functionality to these pages using AWS Lambda and Amazon API Gateway to call remote RESTful APIs. (REST, which stands for Representational State Transfer, is an architectural pattern for creating web services. API stands for application programming interface. Thus, a RESTful API is one that implements that architectural pattern.)

All of your static web content—including HTML, CSS, JavaScript, images, and other files—will be hosted by AWS Amplify. We selected the Amplify service because it makes it straightforward to host and deploy static websites. Your end users will access your site using the URL exposed by Amplify.

If you are nervous about working with so many new things, don't worry! You won't use other AWS services right now, and you also don't need to run any web servers to make your website available. (A "server" is software or a hardware device that accepts and responds to requests made over a network.)

The website will be an extremely simple "Hello World" page, and we will add more functionality in later modules.

For most real applications, you will want to use a custom domain to host your site. A custom domain is a unique branded name that identifies a website, such as www.amazon.com. If you're interested in this, Amplify provides support for custom domains as well.

What you will accomplish

In this module, you will:

  • Create an Amplify app
  • Upload files for a website directly to Amplify
  • Deploy new versions of a webpage with Amplify

Key concepts

Static website – A static website has fixed content, unlike dynamic websites. Static websites are the most basic type of website and are the easiest to create. All that is required is creating a few HTML pages and publishing them to a web server.

Web hosting Provides the technologies/services needed for the website to be viewed on the internet.

AWS Regions Separate geographic areas that AWS uses to house its infrastructure. These are distributed around the world so that customers can choose a Region closest to them to host their cloud infrastructure there.

 Minimum time to complete

5 minutes

 Services used

 Module prerequisites

 Last updated

April 4, 2023

Implementation

    1. Open your favorite text editor on your computer. Create a new file and paste the following HTML in it:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    2. Save the file as index.html.

    3. ZIP (compress) only the HTML file.

    4. In a new browser window, log into the Amplify console. Note: We will be using the Oregon (us-west-2) Region for this tutorial.

    5. In the Get Started section, under Host your web app, choose the orange Get started button.

    6. Select Deploy without Git provider. This is what you should see on the screen:

    7. Choose the Continue button.

    8. In the App name field, enter GettingStarted.

    9. For Environment name, enter dev.

    10. Select the Drag and drop method. This is what you should see on your screen:

    11. Choose the Choose files button.

    12. Select the ZIP file you created in Step 3.

    13. Choose the Save and deploy button.

    14. After a few seconds, you should see the message Deployment successfully completed.

  • 1. Select Domain Management in the left navigation menu.

    2. Copy and paste the URL displayed in the form into your browser.

    Your web app will load in a new browser tab and render "Hello World." Congratulations!

Application architecture

Here is what our architecture looks like right now:

Architecture diagram showing AWS Amplify hosted in AWS Cloud, with connection to external users.

It is pretty minimal right now because we are only using the AWS Amplify console. We now have a live web app users can interact with. Next, we will create a Lambda function.

Was this page helpful?

Build Serverless Function