Getting Started with AWS

Build a Serverless Web Application

with AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, and Amazon Cognito

Module 1: Static Web Hosting with Continuous Deployment

To get started, you will configure AWS Amplify to host the static resources for your web application with continuous deployment built in


In this module, you will configure AWS Amplify to host the static resources for your web application with continuous deployment built in. The Amplify Console provides a git-based workflow for continuous deployment and hosting of full-stack web apps. In subsequent modules, you will add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway.

Architecture overview

Architecture Overview

The architecture for this module is straightforward. All of your static web content including HTML, CSS, JavaScript, images, and other files will be managed by AWS Amplify Console. Your end users will then access your site using the public website URL exposed by AWS Amplify Console. You don't need to run any web servers or use other services to make your site available.

For most real applications you'll want to use a custom domain to host your site. If you're interested in using your own domain, follow the instructions for setting up a custom domain on Amplify.

 Time to complete

15 minutes

 Services used


  • This web application can be deployed in any AWS Region that supports all the services used in this application, which include AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway, and Amazon DynamoDB.

    You can refer to the AWS Regional Services List to see which Regions have the supported services. Among the supported Regions you can choose are:

    • US East (N. Virginia)
    • US East (Ohio)
    • US West (Oregon)
    • EU (Frankfurt)
    • EU (Ireland)
    • EU (London)
    • Asia Pacific (Tokyo)
    • Asia Pacific (Seoul)
    • Asia Pacific (Sydney)
    • Asia Pacific (Mumbai)

    Select your Region from the dropdown in the upper right corner of the AWS Management Console.

    AWS Management Console
  • You have two options to manage the source code for this module: AWS CodeCommit (included in the AWS Free Tier) or GitHub. In this tutorial, we will use CodeCommit to store our application code, but you can do the same by creating a repository on GitHub.

    a. Open the AWS CodeCommit console
    b. Select Create Repository
    c. Set the Repository name to "wildrydes-site"
    d. Select Create
    e. Now that the repository is created, set up an IAM user with Git credentials in the IAM console following these instructions.
    f. Back in the CodeCommit console, from the Clone URL dropdown, select Clone HTTPS

    Select Clone HTTPS

    g. From a terminal window run git clone and the HTTPS URL of the repository:

    $ git clone
    Cloning into 'wildrydes-site'...
    Username for '':XXXXXXXXXX
    Password for 'USERID': XXXXXXXXXXXX
    warning: You appear to have cloned an empty repository.

  • Once you've used either AWS CodeCommit or to create your git repository and clone it locally, you'll need to copy the website content from an existing publicly accessible S3 bucket associated with this workshop and add the content to your repository.

    a. Change directory into your repository and copy the static files from S3:
    cd wildrydes-site
    aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive

    b. Commit the files to your Git service
    $ git add .
    $ git commit -m 'new'
    $ git push

    Counting objects: 95, done.
    Compressing objects: 100% (94/94), done.
    Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
    Total 95 (delta 2), reused 0 (delta 0)
    * [new branch] master -> master

  • Next you'll use the AWS Amplify Console to deploy the website you've just committed to git. The Amplify Console takes care of the work of setting up a place to store your static web application code and provides a number of helpful capabilities to simplify both the lifecycle of that application as well as enable best practices.

    a. Launch the Amplify Console console page
    b. Click Get Started under Deploy with Amplify Console
    c. Go to New App on the top right and choose Host Web App
    d. Select CodeCommit under Get started with Amplify Hosting
    e. Select the Repository service provider used today and select Continue
    f. If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account
    g. From the dropdown, select the Repository and Branch you just created and select Next

    Add repository branch

    h. On the Configure build settings page, leave all the defaults, Select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and select Next.
    i. On the "Review" page select Save and deploy
    j. The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.

    Amplify Console

    Once completed, click on the site image to launch your Wild Rydes site.

    Wild Rydes site

    If you click on the link for Master you'll see the build and deployment details related to your branch, and screenshots of the app on various devices:

    Screenshot of app on various devices
  • The AWS Amplify Console will rebuild and redeploy the app when it detects changes to the connected repository. Make a change to the main page to test out this process.

    a. From your local machine, open `wildryde-site/index.html` in a text editor of your choice and modify the title line so that it says: <title>Wild Rydes - Rydes of the Future!</title>

    b. Save the file and commit to your git repository again. Amplify Console will begin to build the site again soon after it notices the update to the repository. It will happen pretty quickly! Head back to the Amplify Console page to watch the process.

    $ git add index.html 
    $ git commit -m "updated title"
    [master dfec2e5] updated title
     1 file changed, 1 insertion(+), 1 deletion(-)
    $ git push
    Counting objects: 3, done.
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
    Total 3 (delta 2), reused 0 (delta 0)
    remote: processing 
       2e9f540..dfec2e5  master -> master

    c. Once completed, re-open the Wild Rydes site and notice the title change.

    Title change for Wild Rydes site
  • In this module, you've created static website which will be the base for our Wild Rydes business. AWS Amplify Console makes it really easy to deploy static websites following a continuous integration and delivery model. It has capabilities for "building" more complicated Javascript framework based applications and has features such as feature branch deployments, easy custom domain setup, instant deployments, and password protection.

Was this page helpful?

Manage Users