Migrate frontend build system from React Scripts + Craco to Vite

GPTutor-Frontend/package.json

@@ -2,9 +2,10 @@
     "name": "chat",
     "version": "0.0.0",
     "scripts": {
-        "start": "cross-env GENERATE_SOURCEMAP=false PORT=10888 HTTPS=true craco start",
-        "build": "cross-env GENERATE_SOURCEMAP=false craco build",
-        "test": "craco test",
+        "start": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "vitest",
         "predeploy": "npm run build",
         "deploy": "vk-miniapps-deploy"
     },
@@ -63,7 +64,7 @@
     },
     "devDependencies": {
         "@babel/runtime": "^7.21.5",
-        "@craco/craco": "^7.1.0",
+        "@vitejs/plugin-react": "^4.0.3",
         "@types/jest": "^29.5.1",
         "@types/katex": "^0.16.7",
         "@types/lodash.debounce": "^4.0.7",
@@ -80,7 +81,8 @@
         "jest": "^27.5.1",
         "prettier": "^2.8.7",
         "react-hot-loader": "^4.13.0",
-        "react-scripts": "^5.0.1",
+        "vite": "^4.4.5",
+        "vitest": "^0.34.1",
         "ts-jest": "^29.1.0",
         "typescript": "^5.0.4"
     },

GPTutor-Frontend/src/env.js

@@ -0,0 +1,7 @@
+// Environment variables configuration
+// This file is imported by index.tsx but was missing from the original codebase
+
+// For Vite, environment variables are available via import.meta.env
+// This file can be used for additional environment configuration if needed
+
+export default {};

GPTutor-Frontend/tsconfig.json

@@ -1,29 +1,30 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
     ],
     "downlevelIteration": true,
     "allowJs": false,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
   },
   "extends": "./tsconfig.paths.json",
   "include": [
-    "src",
-    "node_modules/eslint-plugin-react/lib/types.d.ts"
-  ]
+    "src"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

GPTutor-Frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

GPTutor-Frontend/vite.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import * as path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '$/api': path.resolve(__dirname, 'src/api'),
+      '$/components': path.resolve(__dirname, 'src/components'),
+      '$/entity': path.resolve(__dirname, 'src/entity'),
+      '$/hooks': path.resolve(__dirname, 'src/hooks'),
+      '$/icons': path.resolve(__dirname, 'src/icons'),
+      '$/panels': path.resolve(__dirname, 'src/panels'),
+      '$/modals': path.resolve(__dirname, 'src/modals'),
+      '$/services': path.resolve(__dirname, 'src/services'),
+      '$/utility': path.resolve(__dirname, 'src/utility'),
+      '$/NavigationContext': path.resolve(__dirname, 'src/NavigationContext'),
+      '$/TabbarApp': path.resolve(__dirname, 'src/TabbarApp'),
+    },
+  },
+  server: {
+    port: 10888,
+    https: true,
+  },
+  build: {
+    sourcemap: false,
+  },
+  define: {
+    global: 'globalThis',
+  },
+})