AWS - Serverless Web Application

Card Puncher Data Processing


Note about the AWS tuto Amazon tuto - Build a Serverless Web Application that create a serverless web app

Code: aws-samples/aws-serverless-workshops/tree/master/WebApplication


Aws Serverless Web App

N Component Function Description
1 Amazon S3 Static Web Hosting Amazon S3 hosts static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser
2 Amazon Cognito User Management Amazon Cognito provides user management and authentication functions to secure the backend API
3 Amazon DynamoDB Serverless Backend Amazon DynamoDB provides a persistence layer where data can be stored by the API's Lambda function.
4 AWS Lambda and Amazon API Gateway RESTful API JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway.


Static Web Hosting

Users Authentication

Creates a user pool ID and an app client ID, see Cognito - Javascript Identity Sdk (amazon-cognito-identity-js) and use:

  • PoolName: NameWildRydes
  • AppName: WildRydesWebApp

Implementation in the app:

  • The config.js file contains settings for the user pool ID, app client ID and Region.
window._config = {
    cognito: {
        userPoolId: 'eu-central-1_7l0D9CCvP', // PoolId e.g. us-east-2_uXboG5pAb
        userPoolClientId: '4rv21psdl35dsj3d1hhb5pug3p', // App clients Id e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'eu-central-1' // e.g. us-east-2
    api: {
        invokeUrl: '' // e.g.',

Service backend

The backend are the functions that process a HTTP request.

The function is a Lambda Function with a IAM Role to give authorization to create data into the Database (Amazon DynamoDB) The Lambda function will be invoked each time an HTTP request is made.

The function will be invoked from the browser after having create an API with the Amazon API Gateway that links the Lambda function to an HTTP endpoint (URL + HTTP method).

The static website is turned into a dynamic web application by adding client-side JavaScript that makes AJAX calls to the exposed APIs.

Create table

See Create table DynamoDB

IAM Role Creation

The IAM role needs to grants to the Lambda function permission to:

Create Role:

  • Create Role > Aws Service > Lambda > Next
  • Permissions > AWSLambdaBasicExecutionRole > Next
  • Create Role > RoleName

Selecting a role type automatically creates a trust policy for your role that allows AWS services to assume this role on your behalf. If you were creating this role using the CLI, AWS CloudFormation or another mechanism, you would specify a trust policy directly.

Role Policy:

  • Select Role > Add Inline Policy
    • Choose a Service > DynamoDb
    • Choose a action > PutItem
    • Choose a resources > Add the Table ARN
    • Next
  • Create Policy > Name: DynamoDBWriteAccess > Create

Lambda creation

  • Console > Services > Lambda > Create a function
    • Options: Author from scratch
    • Name: RequestUnicorn
    • Runtime: Node
    • Role: Use an existing role
    • Create
  • Scroll down to the Function code
  • Create a test
    • From the dropdown at the top of the page: Configure test events
    • Name: TestRequestEvent
    • Code:
    "path": "/ride",
    "httpMethod": "POST",
    "headers": {
        "Accept": "*/*",
        "Authorization": "eyJraWQiOiJLTzRVMWZs",
        "content-type": "application/json; charset=UTF-8"
    "queryStringParameters": null,
    "pathParameters": null,
    "requestContext": {
        "authorizer": {
            "claims": {
                "cognito:username": "the_username"
    "body": "{\"PickupLocation\":{\"Latitude\":47.6174755835663,\"Longitude\":-122.28837066650185}}"
  • Click on the Test button. Response:
  "statusCode": 201,
  "body": "{\"RideId\":\"j09lHYJSAPWwS6k81qEg1Q\",\"Unicorn\":{\"Name\":\"Rocinante\",\"Color\":\"Yellow\",\"Gender\":\"Female\"},\"UnicornName\":\"Rocinante\",\"Eta\":\"30 seconds\",\"Rider\":\"the_username\"}",
  "headers": {
    "Access-Control-Allow-Origin": "*"

AWS Lambda automatically creates a new log group per function in Amazon CloudWatch Logs and writes logs to it when your function is invoked.

To delete, go to CloudWatch > Logs > /aws/lambda/LAMBDA_NAME


Amazon API Gateway exposes the Lambda function and secure it using the Amazon Cognito user pool.

Request Browser code is in the ride.js file. It uses jQuery's ajax() method to make the remote http request.

Create API

  • AWS Management Console> Services > API Gateway
  • Create new API
    • Name: WildRydes
    • Endpoint Type: Edge optimized. Edge optimized are best 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
    • Create
  • Create a new Authorizer
    • Select the created API
    • Scroll Down to Authorizer
    • Create a new one
    • Select Incognito
    • Select the Region
    • Select the User pool
    • Token Source: Authorization
    • Create
  • Create a new resources
    • Select the created API
    • Scroll down to Resources
    • Actions > Create Resources
      • Name: ride
      • Enable API Gateway CORS: Yes
      • Create
  • Create a new HTTP method for the resources (ie HTTP request type: PUT, GET,…)
    • Select the created API
    • Scroll down to Resources
    • Select the Resources
    • Actions > Create a new Method
    • Select below the resources the POST method
    • Setup:
      • Integration Type: Lambda
      • Use Lambda Proxy integration: Check
      • Lambda function: RequestUnicorn or the ARN
  • Resources Authorization:
    • Select a resource
    • Choose the Method Request card.
    • Pencil closed to Authorization
    • Select the authorizer: ie the Cognito User Pool
    • Click the ok mark
  • Deploy API


window._config = {
    cognito: {
        userPoolId: 'eu-central-1_7l0D9CCvP', // PoolId e.g. us-east-2_uXboG5pAb
        userPoolClientId: '4rv21psdl35dsj3d1hhb5pug3p', // App clients Id e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'eu-central-1' // e.g. us-east-2
    api: {
        invokeUrl: '' // e.g.',

Documentation / Reference

Discover More
Card Puncher Data Processing
Aws - Cognito

IAM (Identity Access Management) in Aws Account management where: user pool is a user directory service to handle: user registration, authentication, and account recovery. identity...
Card Puncher Data Processing
Aws - Serverless

in Aws The Amplify Command Line Interface (CLI) is a unified toolchain to create and manage a serverless infrastructure on AWS. The AWS Serverless Application Model (AWS SAM) is an open-source framework...
Card Puncher Data Processing
Code Design - function-as-a-service (faas) - Serverless function

function-as-a-service (faas) is a cloud offer where you can run a function without server. serverless function are functions that are deployed in a serverless framework. They are the lowest level of...
Card Puncher Data Processing
Cognito - Javascript Identity Sdk (amazon-cognito-identity-js)

The Cognito Javascript Sdk is one of the Cognito Sdk amplify SDK the auth amplify library Before: aws/amazon-cognito-identity-js. After: aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js...

Share this page:
Follow us:
Task Runner