TypeScript Migration and Modern Build System Upgrade

.gitignore

@@ -41,6 +41,7 @@ bin/**/*.js
 test/**/*.js
 !jest.config.js
 *.d.ts
+!**/vite-env.d.ts
 node_modules
 
 # CDK asset staging directory

Makefile

@@ -125,6 +125,15 @@ local.config.docker:					## Setup local config based on branch
 	cd $(overlaysSrcPath)/graphql/ && amplify codegen
 	cd $(current_dir)
 
+## Test targets
+
+.PHONY: test test.website
+test:						## Run all tests
+	cd website && npm test
+
+test.website:					## Run website schema conformance tests
+	cd website && npm test
+
 local.config.python:		## Setup a Python .venv
 	python3 -m venv --prompt drem .venv
 	source .venv/bin/activate

lib/base-stack.ts

@@ -137,10 +137,10 @@ export class BaseStack extends cdk.Stack {
     // Lambda
     // Common Config
     const lambda_architecture = awsLambda.Architecture.ARM_64;
-    const lambda_runtime = awsLambda.Runtime.PYTHON_3_11;
-    var lambda_bundling_image = DockerImage.fromRegistry('public.ecr.aws/sam/build-python3.11:latest');
+    const lambda_runtime = awsLambda.Runtime.PYTHON_3_12;
+    var lambda_bundling_image = DockerImage.fromRegistry('public.ecr.aws/sam/build-python3.12:latest');
     if (os.arch() === 'arm64') {
-      lambda_bundling_image = DockerImage.fromRegistry('public.ecr.aws/sam/build-python3.11:latest-arm64');
+      lambda_bundling_image = DockerImage.fromRegistry('public.ecr.aws/sam/build-python3.12:latest-arm64');
     }
 
     // Layers

lib/cdk-pipeline-stack.ts

@@ -12,7 +12,7 @@ import { DeepracerEventManagerStack } from './drem-app-stack';
 
 // Constants
 const NODE_VERSION = '22'; // other possible options: stable, latest, lts
-const CDK_VERSION = '2.1033.0'; // other possible options: latest
+const CDK_VERSION = '2.1106.0'; // other possible options: latest
 const AMPLIFY_VERSION = '12.14.4';
 
 export interface InfrastructurePipelineStageProps extends cdk.StackProps {

package.json

@@ -30,37 +30,38 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
     "@types/jest": "^29.5.14",
-    "@types/node": "20.19.1",
+    "@types/node": "20.19.33",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-    "aws-cdk-lib": "2.202.0",
+    "aws-cdk-lib": "2.225.0",
     "eslint": "^8.48.0",
     "eslint-config-node": "^4.1.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.10.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.5.0",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0",
-    "prettier": "^3.6.0",
-    "ts-jest": "^29.4.0",
+    "prettier": "^3.8.1",
+    "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",
-    "typescript": "5.8.3"
+    "typescript": "5.9.3"
   },
   "dependencies": {
-    "@aws-cdk/aws-lambda-python-alpha": "^2.202.0-alpha.0",
-    "aws-cdk-lib": "2.202.0",
-    "awscdk-appsync-utils": "^0.0.769",
-    "cdk-nag": "2.36.24",
+    "@aws-cdk/aws-lambda-python-alpha": "^2.225.0-alpha.0",
+    "@cloudscape-design/component-toolkit": "^1.0.0-beta.138",
+    "aws-cdk-lib": "2.225.0",
+    "awscdk-appsync-utils": "^0.0.858",
+    "cdk-nag": "2.37.55",
     "cdk-serverless-clamscan": "^2.13.46",
-    "constructs": "^10.4.2",
+    "constructs": "^10.5.0",
     "source-map-support": "^0.5.21"
   }
 }

website-leaderboard/Dockerfile

@@ -1,4 +1,4 @@
-FROM public.ecr.aws/docker/library/node:18-alpine
+FROM public.ecr.aws/docker/library/node:22-alpine
 
 # Install packages
 RUN apk update && apk add --update --no-cache \
@@ -30,4 +30,4 @@ RUN npm install
 
 ENV PORT=3000
 
-CMD ["npm", "start"]
+CMD ["npx", "vite", "--host"]

website-leaderboard/eslint.config.mjs

@@ -0,0 +1,24 @@
+import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['build/**', 'node_modules/**'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  prettier
+);

website-leaderboard/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="DeepRacer Event Manager (DREM)" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>DeepRacer Event Manager - Leaderboard</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

website-leaderboard/package.json

@@ -2,71 +2,46 @@
   "name": "leaderboard",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
-    "@aws-amplify/ui-react": "^5.3.1",
-    "@cloudscape-design/components": "^3.0.409",
-    "@cloudscape-design/global-styles": "^1.0.13",
-    "@testing-library/jest-dom": "^6.1.2",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "aws-amplify": "^5.3.11",
-    "aws-rum-web": "^1.15.0",
-    "classnames": "^2.3.2",
-    "i18next-browser-languagedetector": "^7.1.0",
-    "i18next-xhr-backend": "^3.2.2",
-    "qrcode.react": "^3.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^13.3.0",
-    "react-router-dom": "^6.17.0",
-    "react-scripts": "^5.0.1",
-    "web-vitals": "^3.5.0"
-  },
-  "scripts": {
-    "start": "ESLINT_NO_DEV_ERRORS='true' react-scripts start",
-    "build": "DISABLE_ESLINT_PLUGIN='true' react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@cloudscape-design/components": "^3.0.1205",
+    "@cloudscape-design/global-styles": "^1.0.50",
+    "aws-amplify": "^6.16.2",
+    "aws-rum-web": "^1.25.0",
+    "classnames": "^2.5.1",
+    "i18next": "^25.8.11",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "i18next-http-backend": "^3.0.2",
+    "qrcode.react": "^3.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.7.4",
+    "react-router-dom": "^6.30.3",
+    "web-vitals": "^4.2.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.1",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
-    "eslint": "^8.51.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.4.2",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^3.4.2",
-    "typescript": "5.2.2"
+    "@eslint/js": "^9.39.2",
+    "@types/jest": "^30.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.19.11",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "prettier": "^3.8.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "^8.56.0",
+    "vite": "^7.3.1"
   },
-  "overrides": {
-    "react-scripts": {
-      "typescript": "^5"
-    },
-    "react-refresh": "^0.14.0"
+  "scripts": {
+    "start": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint ."
   }
 }