Serverless Shopping Cart with API Gateway, Lambda, Cognito, SQS, DynamoDB, and Amplify SDK

Key	Value
Environment
Services	API Gateway, Cognito, Lambda, DynamoDB, SQS
Integrations	Serverless Application Model, CloudFormation, Amplify
Categories	Serverless; Application Development
Level	Intermediate
GitHub	Repository link

Introduction

The Serverless Shopping Cart with API Gateway, Lambda, Cognito, SQS, DynamoDB, and Amplify SDK demonstrates how to implement a shopping cart microservice with an integrated frontend built using Vue.js. The application sample displays a mock products page that enables users to add items to the cart without authentication, which is persisted across browser restarts. After logging in, the products are shifted to the user's cart and are removed if logging out.

The products in an anonymous cart are terminated after some time, while an authenticated user's cart is persisted. Users can deploy this application sample on AWS & LocalStack using Serverless Application Model (SAM), CloudFormation, and Amplify SDK with minimal changes. To test this application sample, we will demonstrate how you use LocalStack to deploy the infrastructure on your developer machine and your CI environment.

Architecture diagram

Endpoint	Method	Description
/cart	GET	Retrieve the shopping cart for a user, whether anonymous or logged in.
/cart	POST	Accepts a JSON payload containing product ID and quantity. Adds the specified quantity of an item to the cart.
/cart/migrate	POST	This endpoint is called after logging in to migrate items from an anonymous user's cart to the logged-in user's cart.
/cart/checkout	POST	Empty the shopping cart.
/cart/{product-id}	PUT	Accepts a JSON payload containing product ID and quantity. Updates the quantity of the specified item in the cart.
/cart/{product-id}/total	GET	Retrieve the total amount of a given product across all carts. This API is not used by the frontend but can be manually tested.
/product	GET	Retrieve details for all products.
/product/{product_id}	GET	Retrieve details for a single product.

Instructions

• LocalStack Pro with the localstack CLI.
• Serverless Application Model with the samlocal installed.
• AWS CLI with the awslocal wrapper.
• Node.js with yarn installed.
• Python 3.8.0 in the PATH
• LocalSurf to repoint AWS service calls to LocalStack in the web app.

Start LocalStack Pro with the LOCALSTACK_AUTH_TOKEN pre-configured:

export LOCALSTACK_AUTH_TOKEN=<your-auth-token>
EXTRA_CORS_ALLOWED_ORIGINS=http://localhost:8080 DEBUG=1 localstack start

The EXTRA_CORS_ALLOWED_ORIGINS configuration variable allows our website to send requests to the container APIs. We specified DEBUG=1 to get the printed LocalStack logs directly in the terminal (it helps later, when we need to get the Cognito confirmation code). If you prefer running LocalStack in detached mode, you can add the -d flag to the localstack start command, and use Docker Desktop to view the logs.

Instructions

Deploying the application

To build and deploy the resources, run the following command:

make backend

The above command will create an S3 bucket, deploys CloudFormation stacks for authentication, and set up a mock product and shopping cart services. Alternatively, if you wish to use a custom S3 bucket, set the S3_BUCKET environment variable to the name of your bucket.

The CloudFormation events from the stack operations will take a few seconds to complete. You can view the status of the stack operations in the terminal or the CloudFormation resource browser. On completion, the terminal will display the following message:

CloudFormation outputs from deployed stack
------------------------------------------------------------------------------------------------------------------------------------------------
Outputs                                                                                                                                                           
------------------------------------------------------------------------------------------------------------------------------------------------
Key                 CartApi                                                                                                                                       
Description         API Gateway endpoint URL for Prod stage for Cart Service                                                                                      
Value               https://0fi59sk3kb.execute-api.localhost.localstack.cloud:4566/Prod                                                                           
------------------------------------------------------------------------------------------------------------------------------------------------

Successfully created/updated stack - aws-serverless-shopping-cart-shoppingcart-service in us-east-1

If the SAM application build fails, you can check if you have the Python 3.8 installed and in the PATH. Alternatively, use pyenv to switch between multiple versions of Python.

Setting up the front-end

To set up the front-end, run the following command:

make frontend-serve 

If you see an error for the frontend deployment, similar to error:0308010C:digital envelope routines::unsupported at new Hash this is probably related to your Node-js version. Please run NODE_OPTIONS="--openssl-legacy-provider" make frontend-serve in that case.

The above command will install the dependencies, run a Node.js script to retrieve backend configuration from the SSM parameter and store to a .env.local file. The application is then served locally at http://localhost:8080.

CORS headers on the backend service default to allowing http://localhost:8080/. You will see CORS errors if you access the frontend using the IP (http://127.0.0.1:8080/) or a port other than 8080.

Testing the application

To run the application, we need the LocalSurf browser plugin installed and enabled. Ideally, your applications should use configuration files to specify their AWS services. However, we inherited hard-coded AWS service endpoints in this sample application, which we need to repoint to LocalStack. We can do this using the LocalSurf browser plugin.

In your browser, navigate to http://localhost:8080. You can now create a new account, and login. Even when you are not logged in, you can add or remove items to your shopping cart. For the checkout you will be asked to enter some data. Afterwards, the shopping cart will be empty.

Note: When you first access the website, the Lambda functions start for the first time and therefore may need a few seconds to startup. Subsequent calls will be way faster.

GitHub Action

This application sample hosts an example GitHub Action workflow that starts up LocalStack, deploys the infrastructure, and checks the created resources using awslocal. You can find the workflow in the .github/workflows/main.yml file. To run the workflow, you can fork this repository and push a commit to the main branch.

Users can adapt this example workflow to run in their own CI environment. LocalStack supports various CI environments, including GitHub Actions, CircleCI, Jenkins, Travis CI, and more. You can find more information about the CI integration in the LocalStack documentation.

Learn more

The sample application is based on a public AWS sample app that deploys a shopping cart microservice using serverless technologies on AWS.