Add react HMR

frontend/package.json

@@ -31,11 +31,17 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "autoprefixer": "^10.4.0",
+    "babel-loader": "^10.0.0",
     "css-loader": "^7.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.0",
@@ -46,6 +52,7 @@
     "postcss-loader": "^8.0.0",
     "prettier": "^3.2.0",
     "puppeteer": "^24.0.0",
+    "react-refresh": "^0.18.0",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.0",
     "ts-loader": "^9.5.0",

frontend/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
@@ -12,18 +13,28 @@ module.exports = (env, argv) => {
       filename: 'bundle.js',
       clean: true,
 
-      // Empty string generates relative paths that work through proxies
-      publicPath: '',
+      // Dev needs '/' for HMR WebSocket; prod uses '' for relative paths through proxies
+      publicPath: isProduction ? '' : '/',
     },
     resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+      extensions: ['.ts', '.tsx', '.js'],
     },
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
-          use: 'ts-loader',
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                ['@babel/preset-react', { runtime: 'automatic' }],
+                '@babel/preset-typescript',
+              ],
+              plugins: isProduction ? [] : ['react-refresh/babel'],
+            },
+          },
         },
         {
           test: /\.css$/,
@@ -39,7 +50,9 @@ module.exports = (env, argv) => {
       new HtmlWebpackPlugin({
         template: './src/index.html',
       }),
-      ...(isProduction ? [new MiniCssExtractPlugin()] : []),
+      ...(isProduction
+        ? [new MiniCssExtractPlugin()]
+        : [new ReactRefreshWebpackPlugin()]),
     ],
     devServer: {
       port: 3000,
@@ -47,11 +60,8 @@ module.exports = (env, argv) => {
       historyApiFallback: {
         index: 'index.html',
       },
-      // Disable WebSocket-based HMR for proxy compatibility
-      // VS Code web proxy sends WebSocket messages as Blobs which breaks HMR
-      webSocketServer: false,
-      hot: false,
-      liveReload: false,
+      hot: true,
+      liveReload: true,
       proxy: [
         {
           context: ['/api'],