localstack · dmacvicar · Oct 1, 2025 · Oct 8, 2025 · Oct 8, 2025 · Oct 8, 2025
diff --git a/.gitignore b/.gitignore
@@ -36,6 +36,8 @@ bower_components
 
 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
+ui/build
+ui/test-results
 
 # Dependency directories
 node_modules/
@@ -101,3 +103,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Downloaded binaries
+binaries
diff --git a/Makefile b/Makefile
@@ -21,7 +21,7 @@ debug: ## Start the extension in debug mode
 
 hot-reload: ## Enable hot reloading
 	docker extension dev ui-source $(IMAGE) http://localhost:3000
-	cd ui/ && npm start
+	cd ui/ && npm run dev
 
 stop-hot-realoading: ## Disable hot reloading
 	docker extension dev reset $(IMAGE)

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -13,42 +13,37 @@
     "@mui/x-data-grid": "^5.17.12",
     "axios": "^0.30.2",
     "classnames": "^2.2.6",
-    "cra-template": "1.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.0",
-    "swr": "^1.3.0"
+    "swr": "^1.3.0",
+    "uuid": "^8.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --ext js,ts,tsx src"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "dev": "node ./scripts/esbuild.dev.mjs",
+    "build": "node ./scripts/esbuild.build.mjs",
+    "lint": "eslint --ext js,ts,tsx src",
+    "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@docker/extension-api-client-types": "^0.3.0",
-    "@types/jest": "^27.5.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
     "@types/node": "^17.0.35",
     "@types/react-dom": "^17.0.2",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
+    "dotenv": "^11.0.0",
+    "esbuild": "^0.19.12",
+    "esbuild-plugin-clean": "^1.0.1",
+    "esbuild-plugin-svgr": "^1.0.0",
     "eslint": "^8.24.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-standard-with-typescript": "^23.0.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-n": "^15.2.5",
-    "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "^7.31.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "typescript": "^4.6.4"
   }

diff --git a/ui/public/index.html b/ui/public/index.html
@@ -7,5 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <script type="module" src="./assets/index.js"></script>
   </body>
 </html>
diff --git a/ui/scripts/esbuild.build.mjs b/ui/scripts/esbuild.build.mjs
@@ -0,0 +1,16 @@
+import { build } from 'esbuild';
+import { createConfig, copyStaticAssets } from './esbuild.common.mjs';
+
+const run = async () => {
+  const mode = 'production';
+  try {
+    await build(createConfig({ mode, clean: true }));
+    await copyStaticAssets();
+    console.log('esbuild: production bundle generated in ./build');
+  } catch (error) {
+    console.error(error);
+    process.exitCode = 1;
+  }
+};
+
+run();
diff --git a/ui/scripts/esbuild.common.mjs b/ui/scripts/esbuild.common.mjs
@@ -0,0 +1,83 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { promises as fs } from 'node:fs';
+import dotenv from 'dotenv';
+import cleanPlugin from 'esbuild-plugin-clean';
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
+import svgrPlugin from 'esbuild-plugin-svgr';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+export const rootDir = path.resolve(__dirname, '..');
+export const outDir = path.join(rootDir, 'build');
+export const publicDir = path.join(rootDir, 'public');
+const srcDir = path.join(rootDir, 'src');
+
+const baseLoaders = {
+  '.png': 'file',
+  '.jpg': 'file',
+  '.jpeg': 'file',
+  '.gif': 'file',
+  '.svg': 'file',
+};
+
+dotenv.config({ path: path.join(rootDir, '.env') });
+
+export const copyStaticAssets = async () => {
+  try {
+    await fs.access(publicDir);
+  } catch (error) {
+    if (error && error.code === 'ENOENT') {
+      return;
+    }
+    throw error;
+  }
+
+  await fs.mkdir(outDir, { recursive: true });
+  await fs.cp(publicDir, outDir, { recursive: true });
+};
+
+export const createConfig = ({ mode = 'development', clean = false } = {}) => {
+  const isProd = mode === 'production';
+  const plugins = [
+    NodeModulesPolyfillPlugin(),
+    svgrPlugin(),
+    {
+      name: 'copy-public-dir',
+      setup(build) {
+        build.onStart(async () => {
+          await copyStaticAssets();
+        });
+      },
+    },
+  ];
+
+  if (clean) {
+    plugins.unshift(
+      cleanPlugin({
+        patterns: [path.join(outDir, '*')],
+      }),
+    );
+  }
+
+  return {
+    absWorkingDir: rootDir,
+    entryPoints: [path.join(srcDir, 'index.tsx')],
+    bundle: true,
+    outdir: outDir,
+    format: 'esm',
+    sourcemap: isProd ? false : 'inline',
+    minify: isProd,
+    target: ['es2019'],
+    tsconfig: path.join(rootDir, 'tsconfig.json'),
+    jsx: 'automatic',
+    loader: baseLoaders,
+    entryNames: 'assets/[name]',
+    chunkNames: 'assets/[name]',
+    assetNames: 'assets/[name]',
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(mode),
+    },
+    plugins,
+    logLevel: 'info',
+  };
+};
diff --git a/ui/scripts/esbuild.dev.mjs b/ui/scripts/esbuild.dev.mjs
@@ -0,0 +1,46 @@
+import { context } from 'esbuild';
+import { createConfig, outDir, copyStaticAssets, publicDir } from './esbuild.common.mjs';
+import { watch } from 'node:fs';
+
+const port = Number(process.env.PORT ?? 3000);
+const host = process.env.HOST ?? '0.0.0.0';
+
+const run = async () => {
+  await copyStaticAssets();
+  const ctx = await context(createConfig({ mode: 'development', clean: true }));
+  await ctx.watch();
+  const server = await ctx.serve({
+    servedir: outDir,
+    host,
+    port,
+  });
+
+  const urlHost = server.host === '0.0.0.0' ? 'localhost' : server.host;
+  console.log(`esbuild dev server running at http://${urlHost}:${server.port}`);
+  console.log('Press Ctrl+C to stop.');
+
+  try {
+    watch(publicDir, async () => {
+      try {
+        await copyStaticAssets();
+      } catch (error) {
+        console.error('Failed to copy public assets', error);
+      }
+    });
+  } catch (error) {
+    console.warn('Static asset watcher unavailable:', error.message);
+  }
+
+  const shutdown = async () => {
+    await ctx.dispose();
+    process.exit(0);
+  };
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+};
+
+run().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
@@ -6,6 +6,7 @@
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
+    "types": ["node"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,5 +7,6 @@ @@
       </head>
       <body>
         <div id="root"></div>
+        <script type="module" src="./assets/index.js"></script>
       </body>
     </html>