Building a Web Application Using AWS Amplify and AWS Services

Danny Woo
Cloud Villains
Published in
4 min readMar 4, 2024

Summary

This blog aimed to test AWS Amplify and AWS Services for web development, exploring their advantages over on-premises environments. AWS Amplify was utilized for constructing the frontend web application, while AWS Lambda and API Gateway were employed for backend logic implementation. A simple login page was created for data validation, with DynamoDB storing the data for validation purposes.

Please note that this blog doesn’t specifically explain setting backend logic using AWS Services such as API Gateway, Lambda, and DynamoDB. Other AWS DB services are viable options, and Lambda functions can be implemented differently based on language preferences.

What is Amplify

AWS Amplify streamlines full-stack app development. Its libraries, CLI and services enable an easy connection of the frontend to the cloud for authentication, storage, APIs, and more.

Reference
https://docs.amplify.aws/

Frontend

AWS Amplify

The frontend was built using AWS Amplify. The ‘Host web app’ option in Amplify was selected, which triggered an automatic build and deployment of the code uploaded on GitHub. This process led to the automatic deployment of the pre-uploaded index.html file.

My GitHub repository

Once the Github repository branch is added and building settings are configured, the hosting environment is ready with an accessible URL.

Backend

Amazon DynamoDB

The web application’s purpose is to login and validate data stored in DynamoDB. Items were created with the username ‘Danny’ and its password for verification. DynamoDB was chosen for this task as it is relatively less expensive than RDS.

Reference
https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html

AWS Lambda

A function was implemented using Python to accept data and verify its validity with information stored in DynamoDB using Lambda. If the entered data exists in the DB, a ‘login success’ message is returned.

Ensure ‘AmazonDynamoDBAccess’ and ‘LambdaDynamoDBExecutionRole’ are set for Lambda to access DynamoDB.

Reference
https://docs.aws.amazon.com/lambda/latest/dg/welcome.htm

Amazon API Gateway

To link Amplify and the Lambda function, a GET method REST API was created using API Gateway.

In the JavaScript section of the index.html in the Github repository, the ‘url’ variable is where the API Gateway URL should be inserted.

Reference https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html

Accessing the Web

Once all services are ready, the web is accessible and the alert returns to check whether the value is valid.

Conclusion

The advantages discovered while implementing a simple web using AWS Amplify and AWS services are as follows:

  1. Easy Deployment and Management: AWS Amplify simplifies the deployment and management of web applications. Instead of manually handling complex tasks such as server settings and operations, web applications can be deployed and managed with a few clicks.
  2. High Performance: AWS Amplify delivers content quickly to users worldwide using a CDN (Content Delivery Network). In on-premises environments, additional work is required to set up and manage separate CDN services, but AWS has this feature built-in.

    Reference
    https://aws.amazon.com/amplify/faqs/?nc1=h_ls
  3. Scalability and Security of AWS Services: AWS services provide high scalability. Services like AWS’s Lambda, API Gateway, and DynamoDB show high integration and scalability, and access management between services is also possible using IAM. This enables tasks that are difficult in on-premises environments.

The intention of this blog is not to definitively state that using Amplify is the best choice for building a web application over on-premise environments. Instead, it aims to share insights about the strengths of Cloud-Based Development Services in comparison to on-premise environments. Please feel free to share your thoughts and experiences in the comments below. Thank you for reading.

#MegazonCloud #AWS #Cloud #Cloudvillains #Amplify #Lambda #APIGateway #DynamoDB

--

--