Getting Started with AWS

Build a Basic Web Application

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

Module 1: Create a Web App

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

Introduction

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 stands for 'Representational State Transfer' and it is an architectural pattern for creating web services. API stands for application program 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 since it makes it straight forward 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! (A "server" is software or hardware device that accepts and responds to requests made over a network) in order to make your website available.

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

For most real applications you'll 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 Learn

  • How to create an Amplify app
  • How to upload files for a website directly to Amplify
  • How to deploy new versions of a web page 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 it takes is creating a few HTML pages and publishing them to a web server!

Web Hosting Provides the technologies/services needed for your the website to be viewed in 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 in order to host their cloud infrastructure there.

 Time to Complete

5 minutes

 Services Used

 Module Prereqs

Implementation

  • Create a Web App with Amplify Console
    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. Under Deploy click the orange Get Started button.

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

    full-stack amplify console module one AmplifyAppSetup

    7. Click the orange Continue button.

    8. In the App Name field type GettingStarted.

    9. For Environment name type dev.

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

    full-stack amplify console module one AmplifyManualDeploy

    11. Click the Choose files button.

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

    13. Click the orange Save and deploy button.

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

  • Test Your Web App
    1. Click on the link under Domain.
    2. 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:

full-stack amplify console arch diagram module 1

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

Was this module helpful?

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

Build Serverless Function