Getting Started with AWS

Build a Serverless Web Application

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

We are aware of a problem with this tutorial. It is being updated. We appreciate your patience as we improve our content.  

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 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 using JavaScript to call remote RESTful APIs built with Lambda and API Gateway.

Architecture overview

Architecture Overview

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.

 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.

    1. If you have never configured AWS CLI on your local machine, open a terminal window to install AWS CLI. The installation instructions vary depending on what operating system you're using. If you already have AWS CLI installed and configured, skip to Step 2.
    2. Open the AWS CodeCommit console.
    3. Choose Create Repository.
    4. Enter wildrydes-site for the Repository name.
    5. Choose Create.
    6. Once repository is created, set up an IAM user with Git credentials in the IAM console. Follow the instructions for Step 1 through Step 3 on the Setup for HTTPS users using Git credentials page of the AWS CodeCommit User Guide
      Important Note: When setting up your user in the IAM console, you will need to set up and save two sets of credentials to refer back to.
      1. You must create Access keys in the IAM > Security Credentials tab. Download the Access Key and Secret Access Key IDs or copy and save them in a secure location.
      2. You must also generate HTTPS Git credentials for AWS CodeCommit. Download or save these generated credentials as well.
    7. In the terminal window you used to install AWS CLI, enter the command: aws configure
    8. Enter the AWS Access Key ID and Secret Access Key you created in Step 6. 
    9. For Default region name enter the Region you initially selected to create your CodeCommit repository in.
    10. Leave Default output format blank, and press enter. 

    The following code block is an example of what you will see in your terminal window.

    % aws configure
    AWS Access Key ID [****************]: #####################
    AWS Secret Access Key [****************]: ###################
    Default region name [us-east-1]: us-east-1
    Default output format [None]: 

        11. Set up the git config credential helper in the terminal window.

    git config --global credential.helper '!aws codecommit credential-helper $@'
    git config --global credential.UseHttpPath true

        12. Navigate back to the AWS CodeCommit console and select the wildrydes-site repository.

        13. Select Clone HTTPS from the Clone URL dropdown to copy the HTTPS URL. 

    Select Clone HTTPS

        14. From your terminal window run git clone and paste the HTTPS URL of the repository. 

    The following code block is an example of what you will see in your terminal window:

    $ git clone
    Cloning into ‘wildrydes-site’...
    Username for ‘’: Enter the HTTPS Git credentials for AWS CodeCommit username you generated in Step 6
    Password for ‘’: Enter the HTTPS Git credentials for AWS CodeCommit password you generated in Step 6
    warning: You appear to have cloned an empty repository.

    There will be a warning that you appear to have cloned an empty repository, this is expected. 

    For common fixes to errors thrown when cloning the repository, see Troubleshooting the credential helper and HTTPS connections to AWS CodeCommit

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

    1. Change directory into your repository and copy the static files from S3 using the following commands (make sure you change the Region in the following command to copy the files from the S3 bucket to the Region you selected at the beginning of this tutorial):
      cd wildrydes-site
      aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
    2. Add, commit, and push the git files. 

    The following code block is an example of what you will see in your terminal window:

    $ git add .
    $ git commit -m "new files"
    $ 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.

    1. Launch the AWS Amplify console. 
    2. Choose Get Started
    3. Under the Amplify Hosting Host your web app header, choose Get Started
    4. On the Get started with Amplify Hosting page, select AWS CodeCommit and choose Continue.
    5. On the Add repository branch step, select wildrydes-site from the Select a repository dropdown.
    6. If you used GitHub, you'll need to authorize AWS Amplify to your GitHub account.
    7. In the Branch dropdown select master and choose Next. 
    Add repository branch

        8. On the Build settings page, leave all the defaults, select Allow AWS Amplify to automatically deploy all files hosted in your project root directory and choose Next.

        9. On the Review page select Save and deploy.

        10. The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.

    Once completed, select the site image, or the link underneath the thumbnail to launch your Wild Rydes site. If you select the link for master you'll see the build and deployment details related to your branch. 

    Amplify Console
    Wild Rydes site
  • 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.

    1. On your local machine, navigate to the the wildrydes-site folder and open the index.html file in a text editor of your choice. 
    2. Modify the title line with the following text: <title>Wild Rydes - Rydes of the Future!</title>
    3. Save the file. 
    4. In your terminal window, add, commit your change, and push the change to the 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 AWS Amplify console to watch the process.

    The following code block is an example of what you will see in your terminal window: 

    $ 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

        5. Once Amplify has completed the re-deployment, re-open the Wild Rydes site and notice the tab 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 can deploy static websites following a continuous integration and delivery model. It has the capability to build 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