How to create an AWS Serverless Application Architecture in 7 Easy Steps

8 min readAug 9, 2023

React JS (Frontend), AWS DynamoDB, Lambda, IAM, S3, API Gateway and CloudWatch (Backend, DB and other required stuffs)

In today’s rapidly changing world of web development, scalability and efficiency are essential. Serverless architecture has revolutionized how applications are built, freeing developers from the complexities of managing servers. Serverless architecture brings distinct advantages such as easy scalability, cost optimization, increased developer productivity, and automated management.

In this article, we’ll explore the creation of a powerful Serverless Widget using ReactJS and AWS services like DynamoDB, Lambda, IAM, S3, API Gateway, and CloudWatch.

Let’s take a closer look at the AWS tools we’ll be utilizing to create the architecture

IAM (Identity and Access Management): Creating and managing users, groups, and roles, and control their permissions to access AWS resources.
DynamoDB (NoSQL database): Used for storing data in serverless applications because it eliminates the need for server provisioning and management.
S3 (Object storage): Provides highly durable, available, and scalable storage for various types of data, such as images, videos, and documents.
API Gateway (REST API Gateway): Allows to create, deploy, and manage REST APIs.
Lambda Function (Event-driven compute service): Executes the business logic code in response to events such as HTTP requests, database changes, or file uploads.
AWS Cognito: Provides user sign-up, sign-in, and access control for web and mobile apps. It can be used to add user authentication and authorization to the applications in minutes.
AWS CloudWatch: Monitoring and observability service that collects and analyzes metrics, logs, and events from AWS resources and applications.

How to Create Serverless Backend

Before we start, please ensure that you create everything described below (DB, Lambda Function, etc.) in the same AWS region. As resources hosted in different regions does not communicate with each other, and with limited documentation available online, debugging becomes an even bigger challenge. I learned this fact after spending 7 hours debugging a misconfiguration.

For example, if your DB is hosted in us-east-1, and your lambda function is configured for us-east-2, then calling the APIs will always return 403 forbidden, or 404 Not Found

Step 1) AWS Environment

Sign up for an AWS account by visiting the AWS website (aws.amazon.com).
Visit the AWS console, and get your ‘Secret Access key’, ‘Access Key ID’. This is required to connect your local system and the AWS server. Never expose those keys to the public.
Download and setup AWS CLI on the local system. This is required to upload build files on the S3 bucket, which will eventually be used for hosting.

Step 2) Creating IAM Roles and Policies

The user you created while signing up will be the root user. You can create other roles from IAM, and provision them the required roles and accesses. This helps in establishing role-based authorization system.

While creating serverless backend, it’s advised to provide very limited and specific access to the users, as it strengthens the security of your AWS resources, protects sensitive data, and ensures compliance with security best practices.

Step 3) Creating S3 Bucket

Click on “Create bucket” and provide a unique bucket name (should be unique globally) and region for your files. Access should always be private, although I have set it to public for this example.

Configure bucket settings, such as versioning, logging, and access permissions.

In the Properties tab, you’ll find the bucket website endpoint.

As mentioned above, we use bucket to store build files and other such resources. To upload the frontend build on the S3 bucket, open windows cmd and run the following command.

aws s3 sync build/ s3://serverless-react-1

After a while, the build files will automatically get upload to the S3 bucket.

Step 4) DynamoDB Setup

In the AWS Management Console, search for “DynamoDB” and click on the DynamoDB service to open it.
Click on “Create table” and provide a table name and primary key (Partition Key) for your data.
Configure additional settings such as read and write capacity modes, auto scalability, global secondary indexes, and attribute definitions based on your data model requirements.

One of the biggest advantages of using DynamoDB is automatic backup (every 15 minutes), point-in-time recovery (can restore data to any specific timestamp, highly useful when data corrupts due to a single transaction), in-memory caching to improve performance, and encryption.

Step 5) Build APIs with API Gateway

In the AWS Management Console, search for “API Gateway” and click on the API Gateway service to open it.
Click on ‘Create API’ and choose the REST API type.
Once you click on ‘Create API’, you will get four options, Select the third option to create REST APIs which will work with AWS Lambda, HTTP, and AWS services. Click on ‘Build’ button.

Once you click on ‘Build’, a new page will load up. Enter the API name and Endpoint Type there, and then click on Create API. Set up the API endpoints by defining resources, methods, and integrations.

Configure authentication and authorization mechanisms, such as API keys, AWS IAM, or custom authorizers, to secure your APIs.
After initial configuration is done, create resources (like /health, /products) and the associated methods (POST, GET, etc.). Don’t forget to upload the created APIs to a specific Stage and to enable CORS if you wish to access the APIs from a browser.
A very important point to keep in mind, while configuring the API Gateway, take extra care while selecting which AWS region and lambda function it will be pointing to. If the values are incorrectly selected, the APIs won’t work.

Step 6) Implement business logic with Lambda Functions

In the AWS Management Console, search for “Lambda” and click on the Lambda service to open it.
Click on “Create function” and select the desired runtime for your Lambda function (e.g., Node.js, Python).

Once you click on ‘Create Function’ button, click on ‘Use a blueprint’ option. We can use an existing role with access policies attached or create a new role and then assign the required policies and access to it from IAM.

Configure triggers for your Lambda function, such as API Gateway, S3 events, or DynamoDB streams, based on the events that should trigger the execution of your code.
Write the code for your Lambda function in the code editor provided. In this example, I have created an architecture that supports GET, DELETE, POST, and PATCH requests. Attaching code in the comments.

PS don’t forget to deploy the code after each change made.

Step 7) CloudWatch

CloudWatch provides a variety of pre-built dashboards that can be used to visualize metrics and logs. CloudWatch can collect and monitor metrics, logs, and events from AWS resources, applications, and services. This data can be used to track performance, identify trends, and troubleshoot problems. It can be used to create alarms that trigger notifications when specific metrics or events exceed defined thresholds. This can help to ensure that problems are quickly identified and addressed. It can be used to automate tasks, such as scaling resources up or down based on demand. This can help to improve efficiency and reduce costs.

Testing APIs using Postman

We will be using Postman to test the APIs and ensure that our serverless backend architecture has been configured correctly.

Configure Postman

To call AWS APIs, you must select the AWS Signature authentication type in the Auth section of the API Gateway console. If you do not select this authentication type, the API will return a 403, Method Not Found response.

DynamoDB Extract

Extract of data presently available in the DynamoDB

GET

POST

PATCH

Running Application

As you can see the source of our data is an ‘AWS server GET endpoint’, this means we were successfully able to create a with React JS frontend, and a serverless backend (AWS DynamoDB, Lambda, IAM, S3, API Gateway and CloudWatch)

Future Scope

Scalability and Performance: Explore optimizations like caching for improved scalability and performance.
Security and Access Control: Implement fine-grained access control with IAM roles, enable encryption, and conduct regular security audits.
Integrations and Expansion: Integrate with other AWS or third-party services to add functionality and consider expanding to support multiple regions or cloud providers.
Monitoring and Analytics: Utilize CloudWatch, AWS X-Ray, and custom logging for monitoring, alarms, and performance analysis.
Automation and CI/CD: Automate build, test, and deployment workflows using AWS CodePipeline and CodeBuild for faster updates and improvements.

Overall, with the breadth and depth of AWS tools, developers have the necessary infrastructure and services at their disposal to create highly functional and efficient applications that can meet the demands and scalability of modern web applications.