Skip to main content
Launch this lab in the IP Lab Portal, then follow the steps below in the AWS console. Open IP Lab Portal

​
Overview

​
Project Details

  1. This project provides a guide on creating a contact form and receive email notifications when a form is completed and submitted.
  2. Duration: 1 Hour
  3. AWS Region: US East (N. Virginia) us-east-1

​
Introduction

​
What is a Serverless in AWS?

  1. Serverless computing abstracts away the infrastructure management tasks such as server provisioning, maintenance, and scaling. Developers do not need to worry about server operations.
  2. Services like AWS Lambda automatically scale based on the incoming workload. They can handle any scale of traffic, from a few requests per day to thousands per second, without manual intervention.
  3. With serverless architectures, you pay only for the compute resources consumed by your application or function. There are no upfront costs or charges for idle capacity, which can lead to cost savings, especially for sporadic workloads.
  4. Serverless applications are typically event-driven, responding to triggers such as HTTP requests, database modifications, file uploads, etc. AWS Lambda functions, for example, execute in response to events without needing to be continuously running.
  5. AWS provides managed services like AWS Lambda, API Gateway, DynamoDB, S3, etc., which handle operational aspects such as patching, scaling, and availability. Developers can focus more on application logic rather than infrastructure management.

​
Architecture Diagram

​
Task Details

  1. Sign into the AWS Management Console
  2. Create an Email Identity using SES
  3. Verify the Email address
  4. Create a Lambda Function
  5. Create a new API
  6. Create a Resource
  7. Create a Method
  8. Deploy the API
  9. Test Contact form

​
Launching Project Environment

  1. To launch the project environment, Click on the Start Project button.
  2. Please wait until the cloud environment is provisioned. It will take less than a minute to provision.
  3. Once the Project is started, you will be provided with IAM user name, Password, Access Key, and Secret Access Key.
Note : You can only start one project at any given time

​
Lab guide

​
Project Steps

​
Task 1: Sign in to AWS Management Console

  1. Click on the Open Console button, and you will get redirected to AWS Console in a new browser tab.
  2. On the AWS sign-in page,
    • Leave the Account ID as default. Never edit/remove the 12-digit Account ID present in the AWS Console. otherwise, you cannot proceed with the project.
    • Now copy your User Name and Password in the Project Console to the IAM Username and Password in AWS Console and click on the Sign in button.
  3. Once Signed In to the AWS Management Console, Make the default AWS Region as US East (N. Virginia) us-east-1.

​
Task 2: Create an Email Identity using SES

  1. Make sure you are in the US East (N. Virginia) us-east-1 Region.
  2. Navigate to the Services menu at the top. Click on Amazon Simple Email Service in the Business Application section.
  3. On the left side menu, Select Identities
  4. Click on Create Identity button.
  1. Enter following details:
  • Identity type: Select Email Address
  • Email address: Enter your valid Sender Email ID.
  • Leave other options as default.
  • Click on Create Identity button.
  1. Similarly create another identity for receiver email
  2. Create on Create Identity button.
  3. Enter following details:
  • Identity type: Select Email Address
  • Email address: Enter your valid Reveiver Email ID.
  • Leave other options as default.
  • Click on Create Identity button.
  1. Now you will be able to see that the Identity Status on the Email will be Verification Pending.

​
Task 3: Verify the Email Address

  1. AWS will send a confirmation email to the email that you provided in the above step.
  2. Log in to your Sender mailbox and you will be able to see a mail from Amazon Web Services.
  1. Once you click on the link, you will be routed to the success page.
  1. Similarly Verify the Receiver’s mail also.
  2. Now go to the SES Email Address page and refresh the page. You will be able to see the Verification status as Active.

​
Task 4: Create a Lambda Function

  1. Navigate to the services menu at the top, then click on Lambda under the Compute section.
  2. Click on the Create a function button.
  • Choose: Author from scratch.
  • Function name: Enter WhizFunction
  • Runtime: Select Node.js 22.x
  • Click on Additional Settings, then Enable Custom execution role option.
  • Choose the Role name as Whiz Lambda Role from the list. Click on Save.
  1. Click on Create function button.
  1. Download the Zip file using this Link and extract the zip file locally. You will see one node.js file and one html file for contact form.
  2. If you scroll down a little bit, you can see the Code source section. Here we need to copy paste the NodeJs code that uses the AWS SDK to send an email via Amazon SES (Simple Email Service).
  3. It parses the incoming event’s body to extract information such as the sender’s name, email, and message, then constructs and sends an email containing this information. The function handles success and error cases, returning appropriate HTTP status codes and messages.
  4. Remove the existing code in AWS lambda index.js. Copy Paste the node.js code into your lambda index.js file.
  5. You need to change the sender and receiver email address in the index.js file line number 4 & 5.
  6. Save the function by clicking on Deploy button.

​
Task 5: Create an API

  1. Navigate to the services menu at the top, then click on  API Gateway  in the Network and Content Delivery section.
  2. Click on Build in REST API.
  1. Choose to create a new API as New API. Under settings, choose the API name WhizlabAPI. Leave other options as default and click on Create API

​
Task 6: Creating a Resource

  1. Once the API is created, select the API.
  2. Select Create Resource in actions.
  3. Resource Name: Enter whizlabs
  4. Check CORS (Cross Origin Resource Sharing)
  5. Enter the resource name and click on Create Resource button

​
Task 7: Creating a Method

  1. Once you create a resource, click on Create Method.
  1. Select POST in the drop-down list of Method Type.
  2. Select the Integration Type as Lambda function.
  3. Check Lambda proxy integration
  4. Enter the Lambda Function as WhizFunction. Click on Create Method

​
Task 8: Deploy the API

  1. Once the resource and the method have been created successfully, you can deploy the API.
  2. Click on Deploy API button.
  3. Select the Deployment Stage in the drop-down as New Stage.
  4. Enter Stage Name: TestingAPI  and Stage description as Testing environment for my WhizlabsAPI.
  5. Click on Deploy.
  1. Once the API has been deployed, navigate to Stages. You will be able to see the following
  1. Copy the Invoke URL as mentiond in GIF and save it to any text editor to be used in contact form page which will look similar to : https://kvzhh540yd.execute-api.us-east-1.amazonaws.com/TestingAPI/whizlabs
  2. Now, to Enable the cors click on Resources in the left menu and click on whizlabs resource, Now click on Enable CORS button
  1. Select POST method in Access-Control-Allow-Methods checkbox and click on Save button.

​
Task 9: Test Contact form

  1. Open the contactform.html file in any text editor in your local.
  2. This page includes a form for users to input their name, email, and message. When the form is submitted, the submitToAPI JavaScript function sends the input data as a JSON object to a specified API endpoint using an AJAX POST request. Upon successful submission, the user is alerted, the form is reset, and the page reloads. If there’s an error, an alert displays the error details.
  3. Now update the invoke url in line number 92 with the invoke url you copied
  1. Save the file and open the html document in browser. This will display the created contact form.
  2. Enter the details :
  • Name: Enter
  • Email : Enter Receiver Email
  • Message : Enter your message
  1. Click on Send Message button.
  1. It will return the success message.
  1. You can verify the mail in your receiver mail ID.
Do You Know? Serverless websites can automatically scale to handle millions of requests, ensuring high availability without the need for manual intervention. This architecture allows developers to focus solely on code, as server management is handled by cloud providers like AWS, resulting in faster deployment and reduced operational costs.

​
Completion and Conclusion

  1. You have successfully created and verified Email Identity.
  2. You have successfully created a lambda function.
  3. You have successfully created and deployed your api gateway.
  4. You have successfully Tested your serverless contact form website.

​
End Project

  1. Sign out of AWS Account.
  2. You have successfully completed the project.
  3. Once you completed the steps, click on End Project from the IP Lab Portal project console and wait till the process gets completed.

​
What gets checked

When you press Check my work, the platform verifies each of these:
  • Create a SES Email Identity — Check whether an SES Email Identity is created or not
  • Check SES Email Identity Verification Status — Check whether an SES Email Identity is Email is verified or not
  • Create an AWS Lambda Function — Check whether a Lambda Function is created or not
  • Create an AWS REST API Gateway with CORS enabled — Check whether a REST API Gateway is created with CORS enabled or not