Getting Started with AWS

Build a Basic Web Application

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

In this module you will deploy your serverless function using API Gateway.

Introduction

In this module, we will use Amazon API Gateway to create a RESTful API that will allow us to make calls to our Lambda function from a web client (typically refers to a user's web browser). API Gateway will act as a middle layer between the HTML client we created in Module One and the serverless back-end we created in Module Two.

What You Will Learn

  • Create a new API using API Gateway
  • Define HTTP (Hypertext Transfer Protocol) methods on your API
  • Trigger a Lambda function from an API
  • Enable CORS on an API so you can consume it from a website
  • Test an API created with API Gateway from the AWS Management Console

Key Concepts

RESTful API 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.

HTTP Request Methods HTTP methods are designed to enable communications between clients and servers. Methods, like GET or PUT defined by the HTTP protocol, are used to indicate what action to take on a resource.

CORS The CORS (Cross Origin Resource Sharing) mechanism uses HTTP headers to tell a browser to allow a given web application run at one origin (domain) and have permission to access selected resources from a server at a different origin.

Edge Optimized A resource that uses the AWS Global Infrastructure to better serve clients all over the world.

 Time to Complete

5 minutes

 Services Used

Implementation

  • Create a New REST API
    1. Log into the API Gateway Console.
    2. Click the orange "Create API" button.
    3. Find the REST API box and click the orange "Build" button in it.
    4. Under "Choose the protocol," select REST.
    5. Under "Create new API," select New API.
    6. In the "API name" field type in HelloWorldAPI.
    7. Select "Edge optimized" in the "Endpoint Type" drop-down (Note: Edge optimized endpoints is best for geographically distributed clients. This makes it a good choice for public services being accessed from the Internet. Regional endpoints are typically used for APIs that are accessed primarily from within the same AWS Region.)
    8. Click the blue "Create API" button. Your settings should look like the following screenshot:
    Full Stack tutorial API settings
  • Create a New Resource and Method
    1. In the left nav, click on "Resources" under your HelloWorld API.
    2. With the "/" resource selected, click "Create Method" from the Action drop-down menu.
    3. Select POST from the new drop-down that appears, then click on the checkmark.
    4. Select Lambda Function for the integration type.
    5. Type in HelloWorldFunction into the "Function" field.
    6. Click the blue "Save" button.
    7. You should see a message letting you know you are giving the API you are creating permission to call your Lambda function. Click the "OK" button.
    8. With the newly created POST method selected, select "Enable CORS" from the Action drop-down menu.
    9. Leave the POST checkbox selected and click the blue "Enable CORS and replace existing CORS headers" button.
    Full Stack tutorial EnableCORS

    10. You should see a message asking you to confirm method changes. Click the blue "Yes, replace existing values" button.

    Full Stack tutorial ConfirmMethodChanges
  • Deploy API
    1. In the "Actions" drop-down list select "Deploy API."
    2. Select "[New Stage]" in the "Deployment stage" drop-down list.
    3. Enter dev for the "Stage Name."
    4. Choose "Deploy."
    5. Copy and save the URL next to "Invoke URL" (you will need it in Module Five).
  • Validate API
    1. On the the left nav, click on "Resources."
    2. The methods for our API will now be listed on the right. Click on "POST."
    3. Click on the small blue lightning bolt.
    4. Paste the following into the "Request Body" field:
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }

    5. Click the blue "Test" button.

    6. On the right side, you should see a response with Code 200.

    7. Great! We have built and tested an API that calls our Lambda function.


Application Architecture

Module Three is now complete. Time to review our architecture:

full-stack amplify console arch diagram module 3

We added API Gateway and connected it to our existing Lambda function. Now, we can trigger our function with an API call. We are still missing the ability to generate this call from our web client. We will add our data table first in Module Four and connect everything together in Module Five.

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.

Create Data Table