Deployment Activity: Deploy a Calculator Web App

Using VS Code and GitHub Copilot, create a Node.js React web app for a basic calculator.

Create the App and Run Locally

The app must have a React frontend and a Node.js backend. Organize the codebase in a monorepo.

Frontend: The frontend should contain the following buttons:

• Numbers: 0–9, . (decimal)
• Functions: See table below.

Button	Function
+	Addition
-	Subtraction
×	Multiplication
÷	Division
=	Enter - performs the pending calculation and displays the result
C	Clear - deletes the entire calculation
CE	Clear Entry - deletes only the most recent number or operation entered without erasing the entire, ongoing calculation

• It should create a string with the current expression as the user presses buttons and display it at the top.
• Handle C (Clear) and CE (Clear Entry) on the frontend.

Backend: The backend should compute the value of the expression.

• It has one public function: string calculate(string)

When the user presses =, the frontend should call calculate() on the backend with the current expression and display the return value at the top of the calculator.

Run your calculator locally, and test it out to make sure it works.

Deploy Calculator Frontend to AWS Amplify

Check your calculator app into a GitHub repo.

Deploy the app using AWS Amplify:

• Connect to AWS Console (https://console.aws.amazon.com).
• Create an AWS account if you don’t have one.
• Go to AWS Amplify and connect it to your GitHub.
• Authorize AWS Amplify to use your GitHub account.
• Pick your calculator repo and branch. (Ask us if you don’t see it in the pulldown.)
• Check the box "My app is a monorepo."
• Fill in the root directory of your frontend app.
• Save and deploy.

Visit the deployed URL.

Deploy Calculator Backend to AWS Lambda

• Install the AWS CLI (e.g., the awscli Homebrew formula on macOS).
• Install AWS Toolkit extension into VS Code (or Cursor).
• From the AWS Console, open up AWS Lambda; choose Create Function; choose Author from scratch; enter calculate as the Function name; choose Node.js as the Runtime; click Create function.
• Copy the index.mjs file to your calculator backend codebase.
• Connect the handler to your calculate() function.
• Deploy your Lambda function with a .zip file archive (https://docs.aws.amazon.com/lambda/latest/dg/nodejs-package.html).

Connect REST API to Calculator

Modify the Lambda code so it is invoked by HTTP POST requests to your calculate() function.

Step 1: Open the AWS API Gateway console.

• Create API
• In the REST API box, choose Build
• Under API details, enter Calculator

Step 2: In the Resources page for your API, choose Create Resource

• ResourceName is CalculatorManager

Step 3: Create an HTTP POST method

• In Resources, highlight CalculatorManager. Choose Create Method Method Type: POST
• Integration type: Lambda
• Lambda: enter LambdaFunctionOverHttps

Step 4: Deploy the API

• In Resources, choose Deploy API
• Stage: New stage: test
• Copy the invoke URL into your calculator frontend.

This tutorial may help: https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway-tutorial.html