Fix SPA and migrate server to TS

deployment/frontend/Dockerfile

@@ -11,6 +11,7 @@ RUN --mount=type=cache,target=/root/.npm \
 COPY frontend frontend
 RUN npm run frontend:build
 
+
 # 2. Build the static file server
 FROM node:24 AS server
 
@@ -20,9 +21,13 @@ COPY deployment/frontend/package.json .
 RUN --mount=type=cache,target=/root/.npm \
     npm install
 
+# 2.2. Build
+RUN npm run build
+
 # 2.2. Copy the code
 COPY deployment/frontend/ .
 
+
 # 3. Put it all together
 FROM node:24-slim
 
@@ -44,4 +49,4 @@ COPY --from=server --chown=app /server .
 
 # 4. Final command
 ENV STATIC_FILE_PATH=/app
-ENTRYPOINT ["npm", "run", "start"]
+ENTRYPOINT ["npm", "run", "start:prod"]

deployment/frontend/package.json

@@ -3,10 +3,18 @@
     "version": "1.0.0",
     "main": "server.js",
     "scripts": {
-        "start": "node server.js"
+        "start": "ts-node server.ts",
+        "build": "tsc",
+        "start:prod": "node dist/server.js"
     },
     "dependencies": {
         "express": "^5.1.0",
         "http-proxy-middleware": "^3.0.5"
+    },
+    "devDependencies": {
+        "@types/express": "^4.17.21",
+        "@types/node": "^20.10.0",
+        "typescript": "^5.3.0",
+        "ts-node": "^10.9.0"
     }
 }

deployment/frontend/server.js

@@ -1,22 +0,0 @@
-// server.js
-const express = require('express');
-const { createProxyMiddleware } = require('http-proxy-middleware');
-const path = require('path');
-
-const app = express();
-const port = process.env.PORT || 3000;
-const backendHost = process.env.BACKEND_HOST || "http://localhost:8300";
-const file_path = process.env.STATIC_FILE_PATH || ".";
-
-app.use('/api', createProxyMiddleware({
-    target: backendHost,
-    changeOrigin: true,
-    pathRewrite: { '^/api': '' },
-    ws: true
-}));
-
-app.use(express.static(path.resolve(file_path)));
-
-app.listen(port, () => {
-    console.log(`Server launched на http://localhost:${port}`);
-});

deployment/frontend/server.ts

@@ -0,0 +1,28 @@
+import express from 'express';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import { resolve } from 'path';
+
+const app = express();
+const port = process.env.PORT || 3000;
+const backendHost = process.env.BACKEND_HOST || "http://localhost:8300";
+const filePath = process.env.STATIC_FILE_PATH || ".";
+
+// API proxy middleware
+app.use('/api', createProxyMiddleware({
+    target: backendHost,
+    changeOrigin: true,
+    pathRewrite: { '^/api': '' },
+    ws: true
+}));
+
+// Serve static files
+app.use(express.static(resolve(filePath)));
+
+// SPA routing - catch all handler for client-side routing
+app.get('*', (_req, res) => {
+    res.sendFile(resolve(filePath, 'index.html'));
+});
+
+app.listen(port, () => {
+    console.log(`Server launched on http://localhost:${port}`);
+});

deployment/frontend/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "outDir": "./dist",
+        "rootDir": "./",
+        "declaration": true,
+        "sourceMap": true
+    },
+    "include": [
+        "server.ts"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}