Possibly fix websocket connection via craco in dev mode

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

client/craco.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    devServer: devServerConfig => {
+        devServerConfig.webSocketServer = {
+            options: { path: process.env.PUBLIC_URL + 'ws' }
+        };
+
+        return devServerConfig;
+    }
+};

client/package.json

@@ -14,15 +14,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^0.0.34",
+    "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "export $(cat .env | xargs) ; react-scripts start",
+    "start": "export $(cat .env | xargs) ; craco start",
-    "build": "export $(cat .env | xargs) ; react-scripts build",
+    "build": "export $(cat .env | xargs) ; craco build",
-    "test": "export $(cat .env | xargs) ; react-scripts test",
+    "test": "export $(cat .env | xargs) ; craco test",
-    "eject": "export $(cat .env | xargs) ; react-scripts eject"
+    "eject": "export $(cat .env | xargs) ; craco eject"
   },
   "eslintConfig": {
     "extends": [
@@ -41,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@craco/craco": "^7.0.0"
   }
 }

client/src/App.tsx

@@ -2,8 +2,16 @@
 import React, { useState, useMemo, useEffect, useRef } from 'react';
 import { useApi } from './useApi';
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  useParams
+} from "react-router-dom";
 import './App.css';
 
+const base = process.env.PUBLIC_URL; /* /identities -- set in .env */
+
 const makeFaceBoxes = (photo: any, dimensions: any): any => {
   const faces: FaceData[] = photo.faces;
 
@@ -69,7 +77,7 @@ const Photo = ({ photoId }: any) => {
     }
     const fetchImageData = async (image: number) => {
       console.log(`Loading photo ${image}`);
-      const res = await window.fetch(`../api/v1/photos/${image}`);
+      const res = await window.fetch(`${base}/api/v1/photos/${image}`);
       const photo = await res.json();
       setImage(photo);
     };
@@ -252,7 +260,7 @@ interface IdentitiesProps {
 const Identities = ({ identities, setIdentity } : IdentitiesProps) => {
   const identitiesJSX = useMemo(() => {
     const loadIdentity = async (id: number) => {
-      const res = await window.fetch(`../api/v1/identities/${id}`);
+      const res = await window.fetch(`${base}/api/v1/identities/${id}`);
       const data = await res.json();
       setIdentity(data[0]);
     };
@@ -289,9 +297,12 @@ const App = () => {
   const [identity, setIdentity] = useState<any>(undefined);
   const [image, setImage] = useState<number>(0);
   const { loading, data } = useApi(
-    '../api/v1/identities'
+    `${base}/api/v1/identities`
   );
   const [selected, setSelected] = useState<number[]>([]);
+  const { identityId, faceId } = useParams();
+
+  console.log({ identityId, faceId});
 
   useEffect(() => {
     if (data && data.length) {
@@ -302,7 +313,7 @@ const App = () => {
   const removeSelected = async () => {
     try {
       const res = await window.fetch(
-        `../api/v1/identities/faces/remove/${identity.id}`, {
+        `${base}/api/v1/identities/faces/remove/${identity.id}`, {
         method: 'PUT', 
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ faces: selected })
@@ -355,4 +366,14 @@ const App = () => {
   );
 }
 
-export default App;
+const AppRouter = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route element={<App />} path={`${base}/:identityId?/:faceId?`} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default AppRouter;

server/development.location

@@ -9,6 +9,14 @@ location /identities {
   proxy_pass_header P3P;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
-  proxy_set_header Connection "upgrade";
+  proxy_set_header Connection "Upgrade";
   proxy_pass https://localhost:3000;
+}
+
+location /wsapp/ {
+    proxy_pass http://wsbackend;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "Upgrade";
+    proxy_set_header Host $host;
 }