[DevTools] Dependencies and Basic Structure #2868

megha-narayanan · 2025-06-25T23:42:47Z

Includes dependencies, very elementary facade of react app, and basic devtools command functionality which just prints a statement instead of opening the app.

…mand

changeset-bot · 2025-06-25T23:42:50Z

🦋 Changeset detected

Latest commit: 4a46a58

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@aws-amplify/sandbox	Minor
@aws-amplify/backend-cli	Minor
@aws-amplify/backend-deployer	Patch
@aws-amplify/ai-constructs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Amplifiyer · 2025-06-27T20:22:38Z

.github/dependency_review_config.yml

@@ -28,3 +28,5 @@ allow-licenses:
  - X11
  - zlib-acknowledgement
  - Zlib
+  - LicenseRef-scancode-unknown-license-reference AND MIT


Create a github issue to later fix the issues before we can merge to main.

Done. See: #2872 (comment)

Amplifiyer · 2025-06-27T20:25:24Z

packages/cli/scripts/build-devtools.sh

@@ -0,0 +1,17 @@
+#!/bin/bash


who's invoking this script?

Accidental relic from old build process-- Deleting it.

Amplifiyer · 2025-06-27T20:32:17Z

packages/cli/src/commands/sandbox/port_checker.ts

+  async isDevToolsRunning(): Promise<boolean> {
+    return this.isPortInUse(PortChecker.defaultDevtoolsPort);
+  }


Ideally this shouldn't be in the PortChecker class. We can either create a wrapper over this for devtools or just use isPortInUse at places where we need to determine if devtools is running

got it. going for the second option. My worry was that if we ever change the devtools port there isn't a clear place that constant should be, but at least for the forseeable future sandbox is the the only process using this, so I'm just defining it there.

Amplifiyer · 2025-06-27T20:32:34Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/README.md

+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration


This file should be removed.

Amplifiyer · 2025-06-27T20:34:01Z

packages/cli/src/commands/sandbox/sandbox-devtools/react-app/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>


There seems to be two sets of index.html and index.css. Do we need both?

It looks like my placeholder files were referencing both, but they can easily be consolidated-- done.

Amplifiyer · 2025-06-27T20:41:40Z

packages/cli/src/commands/sandbox/sandbox_command.ts

+    printer.log(
+      `DEBUG: Sandbox identifier: ${String(this.sandboxIdentifier)}, profile: ${String(this.profile)}`,
+      LogLevel.DEBUG,
+    );


Do we need all these logger statements? Also we don't need to prepend DEBUG in each statement, it should be done by the printer if required.

They were useful in development, but I agree they can be deleted now. Cutting a bunch of the excess debug logging.

Amplifiyer · 2025-06-27T20:46:00Z

packages/cli/package.json

-    "update:api": "api-extractor run --local"
+    "update:api": "api-extractor run --local",
+    "clean": "rm -rf lib && rm -rf src/commands/sandbox/sandbox-devtools/public",
+    "build:devtools": "cd src/commands/sandbox/sandbox-devtools/react-app && npm install && npm run build",


when you cd, don't you also need to come back to the cwd?

in npm scripts, each command runs in its own shell subprocess, so when the command finishes, that subprocess exits and youre back in the cwd

Amplifiyer · 2025-06-27T20:46:11Z

packages/cli/package.json

+    "build:devtools": "cd src/commands/sandbox/sandbox-devtools/react-app && npm install && npm run build",
+    "build:ts": "tsc --build --force",
+    "copy:devtools": "mkdir -p lib/commands/sandbox/sandbox-devtools/react-app/dist && cp -r src/commands/sandbox/sandbox-devtools/react-app/dist/* lib/commands/sandbox/sandbox-devtools/react-app/dist/ || echo 'No React app build found'",
+    "build": "npm run clean && npm run build:devtools && npm run build:ts && npm run copy:devtools && chmod +x lib/ampx.js",


why clean every time we build?

Earlier in development build was giving me lots of trouble with changing app assets and file structure, and cleaning every time was the best way to ensure old assets weren't affecting my app. Now, builds are much less frequent, so we can probably take out the clean, but maybe have another script for build:clean that does run clean and run build?

Amplifiyer · 2025-06-27T20:47:02Z

packages/cli/package.json

+    "build:ts": "tsc --build --force",
+    "copy:devtools": "mkdir -p lib/commands/sandbox/sandbox-devtools/react-app/dist && cp -r src/commands/sandbox/sandbox-devtools/react-app/dist/* lib/commands/sandbox/sandbox-devtools/react-app/dist/ || echo 'No React app build found'",
+    "build": "npm run clean && npm run build:devtools && npm run build:ts && npm run copy:devtools && chmod +x lib/ampx.js",
+    "postinstall": "npm run build:devtools && npm run copy:devtools"


who's calling/running this command?

For build, mostly developers (me). The app gets rebuilt often to show changes. Postinstall is no longer useful, removing it.

Amplifiyer · 2025-06-27T20:49:12Z

packages/cli/src/commands/sandbox/sandbox_event_handler_factory.ts

+      resourceConfigChanged: [
+        async () => {
+          try {
+            // Notify that resource configuration has changed
+            printer.log(
+              '[Sandbox] Resource configuration changed, updating resources...',
+              LogLevel.DEBUG,
+            );
+          } catch (error) {
+            printer.print(
+              `${format.error(
+                'Failed to handle resource configuration change.',
+              )} ${format.error(error)}`,
+            );
+          }
+        },
+      ],


who's emitting this event? Should this be in PR2?

yep, removing this and the corresponding field in the type def

PR1: Dependencies, Basic React App Facade, and Barebones Devtools Com…

e994339

…mand

made timeout longer AND temporary workaround for license issues

02a7289

Amplifiyer deleted the branch aws-amplify:feature/dev-tools June 26, 2025 22:01

Amplifiyer closed this Jun 26, 2025

Amplifiyer reopened this Jun 26, 2025

Amplifiyer changed the base branch from feature/dev-tools to feature_dev_tools June 26, 2025 22:02

Fixed Sandbox Tests, Lint Errors

c4b9aa2

megha-narayanan marked this pull request as ready for review June 26, 2025 23:36

megha-narayanan requested review from a team as code owners June 26, 2025 23:36

megha-narayanan added run-e2e Label that will include e2e tests in PR checks workflow and removed run-e2e Label that will include e2e tests in PR checks workflow labels Jun 27, 2025

Amplifiyer changed the base branch from feature_dev_tools to feature/dev-tools June 27, 2025 16:31

Amplifiyer closed this Jun 27, 2025

Amplifiyer reopened this Jun 27, 2025

Amplifiyer added 2 commits June 27, 2025 13:04

fix checks

b322d36

add changeset

7bc9a2f

Amplifiyer reviewed Jun 27, 2025

View reviewed changes

responding to code review comments, fixing failing api check

4a46a58

[DevTools] Dependencies and Basic Structure #2868

Are you sure you want to change the base?

[DevTools] Dependencies and Basic Structure #2868

Uh oh!

Conversation

megha-narayanan commented Jun 25, 2025

Uh oh!

changeset-bot bot commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

changeset-bot bot commented Jun 25, 2025 •

edited

Loading