Build a Serverless Web Application with AWS Lambda, API Gateway,Amplify,DynamoDB and Cognito
Tags: aws, api, cloud, tutorial
Published: 2023-08-07 20:40:52

## Introduction: 
Build a serverless web application to follow step-by-step instructions to create a simple serverless web application that enables users to request unicorn rides from the [Wild Rydes fleet](http://www.wildrydes.com/).

## Prerequisites:

- AWS account
- ArcGIS [Account](https://www.arcgis.com/sharing/oauth2/authorize?client_id=arcgisonline&response_type=code&state=%7B%22portalUrl%22%3A%22https%3A%2F%2Fwww.arcgis.com%22%2C%22uid%22%3A%226dL7VZOr_kNzhQvrYvtBg7nVFAYza-mXDHLcYUYa_JQ%22%2C%22useLandingPage%22%3Atrue%2C%22clientId%22%3A%22arcgisonline%22%7D&expiration=20160&locale=en-gb&redirect_uri=https%3A%2F%2Fwww.arcgis.com%2Fhome%2Faccountswitcher-callback.html&force_login=true&redirectToUserOrgUrl=true&code_challenge=D8zOAdkMArKQ08d-P_gaAhWo801fO3mCwoIhnZ-29zo&code_challenge_method=S256&display=default&hideCancel=true&showSignupOption=true&canHandleCrossOrgSignIn=true&signuptype=esri&allow_verification=true) to add mapping to your app
- Text editor (VS CODE)
- AWS Lambda 
- AWS API Gateway 
- AWS Amplify
- Amazon DynamoDB 
- Amazon Cognito

## Application Architecture Diagram:

The application architecture uses AWS Lambda, Amazon API Gateway, Amazon DynamoDB, Amazon Cognito, and AWS Amplify Console. Amplify Console provides continuous deployment and hosting of the static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser. JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway. Amazon Cognito provides user management and authentication functions to secure the backend API. Finally, DynamoDB provides a persistence layer where data can be stored by the API's Lambda function

![Serverless Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z82isx0bhoxosyg7w1ct.png)
 

## AWS Amplify:

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.


![Amplify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b4yf6xkt9j0e3dcjx7x.png)

**Follow step by step to configure aws:**

- Go to AWS Console and Choose your aws region.
- Create a Git repository using Codecommit (free Tier) or GitHub. Open the [AWS CodeCommit console](https://console.aws.amazon.com/codesuite/codecommit/repositories)
Note: I use **AWS Codecommit** and **AWS cloudshell** for terminal
- Select **Create Repository** and set the repo name to "`wildrydes-site`"
- Select **Create**
-  Now that the repository is created, set up an IAM user with Git credentials in the IAM console [following these instructions.](https://docs.aws.amazon.com/codecommit/latest/userguide/setting-up-gc.html#setting-up-gc-iam) 

- (Recommended to use IAM user for this project)
- Back in the CodeCommit console, from the Clone URL dropdown, select Clone HTTPS


![git clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/968tdnt2qda56vzar7kz.png)

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

```
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
```

Enter username and password from Git credential HTTPS connections [(Link to Setup)] (https://docs.aws.amazon.com/codecommit/latest/userguide/setting-up-gc.html#setting-up-gc-iam) **Step 3**.

**Note:**You appear to have cloned an empty repository.

Now we have created git repository and cloned empty repository locally. Next we push the code to **wildrydes-site** repo manually.

- Change directory into your repository:

```
$ cd wildrydes-site
```
- copy the static files from S3:

```
$ aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
```
![code push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c0rehflcvtz1q2s4y30.png)
- Commit the files to your Git service

```
$ git add .
$ git commit -m 'first'
$ git push
```
![Code commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dmdpoz8dyccjekv63p0.png)

We have pushed the code to AWS codecommit `wildrydes-site` repository successfully.

**Enable web Hosting with the AWS Amplify console:**

- Launch the [Amplify Console console page](https://console.aws.amazon.com/amplify/home) and Click **Get Started** under Deploy with Amplify Console
- Go to **New App** on the top right and choose **Host Web App**
-  Select **CodeCommit** under **Get started with Amplify Hosting**

![AWS Amplify Get Started](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ietmphpd690a0etgeat3.png)

- Select the Repository service provider used today and select **Next**

![repo choose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl0t3l46yh5f80mduuyv.png)

-  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**.
- On the "Review" page select **Save and deploy**.
- The process takes a couple of minutes for Amplify Console to create the necessary resources and to deploy your code.


![CD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fhxi4pfvdi8pb19vhns.png)

**Successfully Code Deployed!**

![website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mna0utnfklgtps9xmeca.png)

## <u>User Management (Amazon Cognito):</u>

You will create an Amazon Cognito user pool to manage your users accounts. You'll deploy pages that enable customers to register as a new user, verify their email address, and sign into the site.

![Serverless](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjnty6q5aept7z92rkrm.png)

When users visit your website they will first register a new user account. For the purposes of this workshop we'll only require them to provide an email address and password to register. However, you can configure Amazon Cognito to require additional attributes in your own applications.

After users submit their registration, Amazon Cognito will send a confirmation email with a verification code to the address they provided. To confirm their account, users will return to your site and enter their email address and the verification code they received. You can also confirm user accounts using the Amazon Cognito console with a fake email addresses for testing.

After users have a confirmed account (either using the email verification process or a manual confirmation through the console), they will be able to sign in. When users sign in, they enter their username (or email) and password. A JavaScript function then communicates with Amazon Cognito, authenticates using the Secure Remote Password protocol (SRP), and receives back a set of JSON Web Tokens (JWT). The JWTs contain claims about the identity of the user and will be used in the next module to authenticate against the RESTful API you build with Amazon API Gateway.

**Create An Amazon Cognito User Pool and Integrate an App to Your User Pool:**

Amazon Cognito provides two different mechanisms for authenticating users. 

1.  **Cognito User Pools** to add sign-up and sign-in functionality to your application 
2. Choose Create user pool. to authenticate users through social identity providers such as Facebook, Twitter, or Amazon, with SAML identity solutions, or by using your own identity system.

**Note :** We use Cognito User Pools for this authentication.

- Open **Cognito** from AWS search bar.
- Choose **Create user pool**.
- On the **Configure sign-in experience** page, in the **Cognito user pool sign-in options** section, select **User name**. Keep the defaults for the other settings, such as **Provider types** in the **Authentication providers** section. Choose **Next**.
- On the **Configure security requirements** page, keep the **Password policy mode** as **Cognito defaults**. You can choose to configure multi-factor authentication (MFA) or choose **No MFA** and keep other configurations as default. Choose **Next**.
- On the **Configure sign-up experience** page, keep everything as default. Choose **Next**.
- On the **Configure message delivery** page, for **Email provider**, confirm that **Send email with Amazon SES - Recommended** is selected. In the **FROM email address** field, select an email address that you have verified with Amazon SES, following these [instructions from the Amazon SES Developer Guide](https://docs.aws.amazon.com/ses/latest/dg/creating-identities.html#just-verify-email-proc).
-  On the **Integrate your app page**, provide a name for your user pool such as `WildRydes`. Under **Initial app client**, give the app client a name such as `WildRydesWebApp` and keep other settings as default.
- On the **Review** and create page, choose **Create user pool**.

**Note:** Note the **Pool ID** and the App **client ID** on the Pool details page of your newly created user pool.

![user. Management](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb5hvslqbzzom4s2qwev.png)

<u>**Update the Website Config:**</u>

The `/js/config.js` file contains settings for the user pool ID, app client ID and Region. Update this file with the settings from the user pool and app you created in the previous steps and upload the file back to your bucket

- From your local machine, open `wildryde-site/js/config.js` in a text editor of your choice.

- Update the cognito section with the correct values for the user pool and app you just created.

You can find the value for `userPoolId` on the Pool details page of the Amazon Cognito console after you select the user pool that you created.

You can find the value for `userPoolClientId` by selecting App clients from the left navigation bar. Use the value from the App client id field for the app you created in the previous section.

The value for region should be the AWS Region code where you created your user pool. E.g. `us-east-1` for the N. Virginia Region, or `us-west-2` for the Oregon Region. If you're not sure which code to use, you can look at the Pool ARN value on the Pool details page. The Region code is the part of the ARN immediately after `arn:aws:cognito-idp:`

The updated config.js file should look like this. Note that the actual values for your file will be different:

```
window._config = {
    cognito: {
        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'us-west-2' // e.g. us-east-2
    },
    api: {
        invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};
```

- Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

```
$ git add .
$ git commit -m "new_config"
$ git push
```
![git update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkjdlvjpqq5eegpgaw2r.png)

**<u>Validate your implementation:</u>**

- `Visit /register.html` under your website domain, or choose the **Giddy Up**! button on the homepage of your site.

![sign in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hcsio3h8jxow7408d9o.png)

- Complete the registration form and choose **Let's Ryde**. You can use your own email or enter a fake email. Make sure to choose a password that contains at least one upper-case letter, a number, and a special character. Don't forget the password you entered for later. You should see an alert that confirms that your user has been created.

- Confirm your new user using one of the two following methods.

- If you used an email address you control, you can complete the account verification process by visiting /verify.html under your website domain and entering the verification code that is emailed to you. Please note, the verification email may end up in your spam folder. For real deployments we recommend [configuring your user pool to use Amazon Simple Email Service](http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pool-settings-message-customizations.html#cognito-user-pool-settings-ses-authorization-to-send-email) to send emails from a domain you own.

![verify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz4ay6czxnj0sewhom93.png)
- If you used a dummy email address, you must confirm the user manually through the Cognito console.

- From the AWS console, click Services then select **Cognito** under Security, Identity & Compliance.

- Choose **Manage your User Pools**

- Select the `WildRydes user pool` and click **Users and groups** in the left navigation bar.

- Choose Confirm user to finalize the account creation process.

- After confirming the new user using either the `/verify.html` page or the Cognito console, visit `/signin.html` and log in using the email address and password you entered during the registration step.

- If successful you should be redirected to `/ride.html`. You should see a notification that the API is not configured.

![successful authenticsted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76aooelcub6ew8obtvwf.png)

## <u>Serverless Service Backend:</u>

You will use AWS Lambda and Amazon DynamoDB to build a backend process for handling requests for your web application. The browser application that you deployed in the first module allows users to request that a unicorn be sent to a location of their choice. To fulfill those requests, the JavaScript running in the browser will need to invoke a service running in the cloud.

![Lambda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxw1wjlzvttp0qamuz75.png)

**<u>Create an Amazon DynaMoDB Table:</u>**

Use the Amazon DynamoDB console to create a new DynamoDB table. Call your table Rides and give it a partition key called RideId with type String. The table name and partition key are case sensitive. Make sure you use the exact IDs provided. Use the defaults for all other settings.

After you've created the table, note the **ARN** for use in the next step.

- From the AWS Management Console, choose **Services** then select **DynamoDB** under Databases.
- Choose **Create table**.
- Enter _Rides_ for the **Table name**. This field is case sensitive.
- Enter _RideId_ for the **Partition key** and select **String** for the key type. This field is case sensitive.
- Check the **Use default settings** box and choose **Create**. Navigate to the **Tables** page in the DynamoDB console and wait for your table creation to complete. Once it is completed, select your table name.
- Scroll to the bottom of the **Overview** section of your new table and choose **Additional info**. Note the `ARN`. You will use this in the next section.

![DynamoDB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc2eh6g1qad9x2vsqh6x.png)

<u>**Create an IAM Role for your Lambda Function:**</u>

- From the AWS Management Console, click on **Services** and then select **IAM** in the Security, Identity & Compliance section.

-  Select **Roles** in the left navigation pane and then choose **Create Role**.

- Underneath **Trusted Entity Type**, select AWS service. For **Use case**, select **Lambda**, then choose **Next**.

- Begin typing `AWSLambdaBasicExecutionRole` in the **Filter** text box and check the box next to that role.

- Choose **Next Step**.

- Enter `WildRydesLambda` for the **Role Name**. Keep other parameters as default.

- Choose **Create Role**.

- Type `WildRydesLambda` into the filter box on the Roles page and choose the role you just created.

- On the **Permissions tab**, on the left under **Add permissions**, choose `Create Inline Policy`

- Select **Choose a service**.

- Begin typing `DynamoDB` into the search box labeled **Find a service** and select **DynamoDB** when it appears.

- Choose **Select actions**.

- Begin typing _PutItem_ into the search box labeled **Filter actions** and check the box next to **PutItem** when it appears.

- Select the **Resources** section.

- With the **Specific** option selected, choose the Add ARN link in the **table** section.

![arn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5o6zohkkbw7f9aqy283.png)

- Paste the ARN of the table you created in the previous section in the **Specify ARN for table** field, and choose **Add**.

![review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qooxt0h0pjz8d99ym8b.png)

- Choose **Review Policy**.

- Enter `DynamoDBWriteAccess` for the policy name and choose **Create policy**.

**<u>Create a Lambda Function for Handling Requests:</u>**

AWS Lambda will run your code in response to events such as an HTTP request. In this step you'll build the core function that will process API requests from the web application to dispatch a unicorn. In the next module you'll use Amazon API Gateway to create a RESTful API that will expose an HTTP endpoint that can be invoked from your users' browsers. You'll then connect the Lambda function you create in this step to that API in order to create a fully functional backend for your web application.

Make sure to configure your function to use the `WildRydesLambda IAM` role you created in the previous section.

- Choose **Services** then select **Lambda** in the Compute section.
- Click **Create function**.
- Keep the default **Author from scratch** card selected.
- Enter RequestUnicorn in the **Name** field.
- Select **Node.js 16.x** for the **Runtime** (newer versions of Node.js will not work in this tutorial)
- Ensure Use an **existing role** is selected from the **Change default execution role** 
dropdown.
- Select `WildRydesLambda` from the **Existing Role** dropdown.
- Click on **Create function**.

- Scroll down to the **Code source** section and replace the existing code in the **index.js** code editor with this code.

```
const { randomBytes } = require('crypto');
const { DynamoDBClient, PutItemCommand } = require('@aws-sdk/client-dynamodb');
const { marshall } = require('@aws-sdk/util-dynamodb');

const ddbClient = new DynamoDBClient({ region: 'us-east-1' }); // Update with your desired region

const fleet = [
  {
    Name: 'Bucephalus',
    Color: 'Golden',
    Gender: 'Male',
  },
  {
    Name: 'Shadowfax',
    Color: 'White',
    Gender: 'Male',
  },
  {
    Name: 'Rocinante',
    Color: 'Yellow',
    Gender: 'Female',
  },
];

exports.handler = async (event) => {
  if (!event.requestContext.authorizer) {
    return errorResponse('Authorization not configured', event.requestContext.requestId);
  }

  const rideId = toUrlString(randomBytes(16));
  console.log('Received event (', rideId, '): ', event);

  const username = event.requestContext.authorizer.claims['cognito:username'];

  const requestBody = JSON.parse(event.body);

  const pickupLocation = requestBody.PickupLocation;

  const unicorn = findUnicorn(pickupLocation);

  try {
    await recordRide(rideId, username, unicorn);

    return {
      statusCode: 201,
      body: JSON.stringify({
        RideId: rideId,
        Unicorn: unicorn,
        UnicornName: unicorn.Name,
        Eta: '30 seconds',
        Rider: username,
      }),
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    };
  } catch (err) {
    console.error(err);

    return errorResponse(err.message, event.requestContext.requestId);
  }
};

function findUnicorn(pickupLocation) {
  console.log('Finding unicorn for ', pickupLocation.Latitude, ', ', pickupLocation.Longitude);
  return fleet[Math.floor(Math.random() * fleet.length)];
}

async function recordRide(rideId, username, unicorn) {
  const params = {
    TableName: 'Rides',
    Item: marshall({
      RideId: rideId,
      User: username,
      Unicorn: unicorn,
      UnicornName: unicorn.Name,
      RequestTime: new Date().toISOString(),
    }),
  };

  await ddbClient.send(new PutItemCommand(params));
}

function toUrlString(buffer) {
  return buffer
    .toString('base64')
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=/g, '');
}

function errorResponse(errorMessage, awsRequestId) {
  return {
    statusCode: 500,
    body: JSON.stringify({
      Error: errorMessage,
      Reference: awsRequestId,
    }),
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  };
}
```

![lambda code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jv7ywoubat10nhnf2z9i.png)

- Choose **Deploy**.

<u>**Validate Your Implementation:**</u>

- From the main edit screen for your function, select **Test** and choose **Configure test event** from the dropdown.
- Keep **Create new event** selected.
- Enter `TestRequestEvent` in the **Event name** field
- Copy and paste the following test event into the editor:

```
{
    "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}}"
}
```
- Choose **Save**.
- On the main function edit screen click **Test** with `TestRequestEvent` selected in the dropdown.
- Scroll to the top of the page and expand the **Details** section of the **Execution result** section.
-  Verify that the execution succeeded and that the function result looks like the following:

```
{
    "statusCode": 201,
    "body": "{\"RideId\":\"SvLnijIAtg6inAFUBRT+Fg==\",\"Unicorn\":{\"Name\":\"Rocinante\",\"Color\":\"Yellow\",\"Gender\":\"Female\"},\"Eta\":\"30 seconds\"}",
    "headers": {
        "Access-Control-Allow-Origin": "*"
    }
}
```
![execution result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eztakpaiw2v1lvta39lc.png)

<u>## Deploy a Restful API:</u>

you will use Amazon API Gateway to expose the Lambda function you built in the previous module as a RESTful API. This API will be accessible on the public Internet. It will be secured using the Amazon Cognito user pool you created in the previous module. Using this configuration, you will then turn your statically hosted website into a dynamic web application by adding client-side JavaScript that makes AJAX calls to the exposed APIs.

![api gateway](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aojxyhwv3j1lykt72cll.png)

<u>**Create a New REST API:**</u>

- In the AWS Management Console, click **Services** then select **API Gateway** under Application Services

- Choose **Create API**. Underneath the **Create new API** section, make sure **New API** is selected.

- Select **Build** under **REST API** and enter `WildRydes` for the **API Name**.

-  Choose **Edge optimized** in the **Endpoint Type** dropdown. **Note**: 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.

- Choose **Create API**

<u>**Create a New resource and method**:</u>

- In the left nav, click on **Resources** under your WildRydes API.

- From the **Actions** dropdown select **Create Resource.**

- Enter `ride` as the **Resource Name.**

d. Ensure the **Resource Path** is set to ride.

e. Select **Enable API Gateway CORS** for the resource.

f. Click **Create Resource**.

g. With the newly created _/ride_ resource selected, from the **Action** dropdown select **Create Method**.

- Select _POST_ from the new dropdown that appears, then **click the checkmark**.

- Select **Lambda Function** for the integration type.

- Check the box for **Use Lambda Proxy integration.**

- Select the Region you are using for **Lambda Region.**

- Enter the name of the function you created in the previous module, `RequestUnicorn`, for **Lambda Function.**


![api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8olildyjo5j0wpjii0x.png)

- Choose **Save**. Please note, if you get an error that your function does not exist, check that the region you selected matches the one you used in the previous module.

- When prompted to give Amazon API Gateway permission to invoke your function, choose **OK**.

- Choose on the **Method Request card**.

- Choose the pencil icon next to **Authorization**.

- Select the WildRydes Cognito user pool authorizer from the drop-down list, and click the checkmark icon.

**<u>Deploy Your API:</u>**

From the Amazon API Gateway console, choose Actions, Deploy API. You'll be prompted to create a new stage. You can use prod for the stage name.

- In the **Actions** drop-down list select **Deploy API.**
- Select **[New Stage]** in the **Deployment stage** drop-down list.
- Enter `prod` for the **Stage Name.**
- Choose **Deploy**.
- Note the **Invoke URL**. You will use it in the next section.

**<u>Update the Website Config:</u>**

Update the `/js/config.js` file in your website deployment to include the invoke URL of the stage you just created. You should copy the invoke URL directly from the top of the stage editor page on the Amazon API Gateway console and paste it into the _config.api.invokeUrl key of your sites `/js/config.js` file. Make sure when you update the config file it still contains the updates you made in the previous module for your Cognito user pool.

- Open the `config.js` file in a text editor.
- Update the **invokeUrl** setting under the **api** key in the config.js file. Set the value to the **Invoke URL** for the deployment stage your created in the previous section.

```
window._config = {

    cognito: {

        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         

        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv

        region: 'us-west-2' // e.g. us-east-2 

    }, 

    api: { 

        invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 

    } 

};
```

![invoke api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hodqdyfryi5w8ib0ye0j.png)

- Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

```
$ git add .
$ git commit -m "new_configuration"
$ git push
```

<u>**Validate your implementation:**</u>

**Note:** It is possible that you will see a delay between updating the `config.js` file in your S3 bucket and when the updated content is visible in your browser. You should also ensure that you clear your browser cache before executing the following steps.

- Update the ArcGIS JS version from 4.3 to 4.6 (newer versions will not work in this tutorial) in the **ride.html** file as:

```
<script src="https://js.arcgis.com/4.6/"></script>
 <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
```

- Save the modified file and push it to your Git repository to have it automatically deploy to Amplify Console.

- Visit `/ride.html` under your website domain.
- If you are redirected to the [ArcGIS sign-in page](https://www.arcgis.com/home/signin.html).
- After the map has loaded, click anywhere on the map to set a pickup location.
- Choose **Request Unicorn**. You should see a notification in the right sidebar that a unicorn is on its way and then see a unicorn icon fly to your pickup local.

## <u>Terminate Resources:</u>

- Delete your app in Amplify.
- Delete your Amazon Cognito user pool
- Delete your Serverless backend
- Delete your Rest API
- Delete your CloudWatch Log.

We have successfully  Build a Serverless Web Application with AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, and Amazon Cognito.

**Thank you for reading. Follow and like this Post for more tech content.**