Skip to main content

Local Debugging and Testing

This document describes methods for running and debugging application code in a local development environment, as well as testing methods.

Development Mode Execution and Verification in VSCode​

Since this catalog AMI is built on Remote EC2 Sandbox, when using VSCode, you can verify operations from your local PC browser using "Remote SSH" as described in Remote EC2 Sandbox's connection methods and usage.

Running Development Mode in VSCode Terminal​

In VS Code, open a new terminal (Terminal > New Terminal from the top menu), run npm install to install the dependencies, and then run npm run dev.".

[ec2-sandbox-x86_64@ serverless-frontend-application-stack] $ npm install
[ec2-sandbox-x86_64@ serverless-frontend-application-stack] $ npm run dev

> dev
> react-router dev

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://10.0.100.127:3000/
  ➜  press h + enter to show help

When executed without errors, a notification like this will appear at the bottom right of the screen.

Checking Port-Forwarded Port Numbers​

When using VSCode's Remote SSH Extension, clicking "Open in Browser" from the notification displayed in the previous section will open the screen directly on your local PC. If you want to check the forwarded port number or verify operations in a different browser, open the Ports tab from the Terminal screen and open the Forwarded Address.

Operation Verification Screens​

If verified as follows, it's OK.

Welcome Page (Top Page)​

TodoList Page​

Example of Async Processing and Server-side API Implementation​

It's also possible to implement WebAPIs using loader/action definitions. Clicking the red-framed area below will display a loader and send a dummy request asynchronously to PUT /todolist. This catalog includes a mechanism that sleeps for about 1 second for verification purposes and returns a dummy response.

Upon completion, a message is displayed via toast.