split Dockerfile, dynamic backend URL

tank-frontend/.dockerignore

@@ -0,0 +1,24 @@
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/.idea
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/dist
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml

tank-frontend/.env

@@ -1,3 +0,0 @@
-TANK_DOMAIN=vinzenz-lpt2
-VITE_TANK_API=http://$TANK_DOMAIN
-VITE_TANK_WS=ws://$TANK_DOMAIN

tank-frontend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:21-alpine AS build-client
+WORKDIR /app
+
+# dependencies
+COPY package.json .
+COPY package-lock.json .
+RUN npm i
+
+# build
+env CONTAINERMODE 1
+COPY . .
+RUN npm run build
+

tank-frontend/src/ClientScreen.tsx

@@ -3,6 +3,7 @@ import {useEffect, useRef} from 'react';
 import './ClientScreen.css';
 import {hslToString, Theme} from "./theme.ts";
 import {Guid} from "./Guid.ts";
+import {makeApiUrl} from './serverCalls.tsx';
 
 const pixelsPerRow = 352;
 const pixelsPerCol = 160;
@@ -104,7 +105,7 @@ export default function ClientScreen({logout, theme, playerId}: {
 }) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
-    const url = new URL('/screen', import.meta.env.VITE_TANK_WS);
+    const url = makeApiUrl('/screen', 'ws');
     if (playerId)
         url.searchParams.set('player', playerId);
 

tank-frontend/src/Controls.tsx

@@ -2,9 +2,10 @@ import './Controls.css';
 import useWebSocket, {ReadyState} from 'react-use-websocket';
 import {useEffect} from 'react';
 import {Guid} from "./Guid.ts";
+import {makeApiUrl} from './serverCalls.tsx';
 
 export default function Controls({playerId}: { playerId: Guid }) {
-    const url = new URL('controls', import.meta.env.VITE_TANK_WS);
+    const url = makeApiUrl('/controls', 'ws');
     url.searchParams.set('playerId', playerId);
 
     const {

tank-frontend/src/PlayerInfo.tsx

@@ -1,5 +1,5 @@
 import {useQuery} from '@tanstack/react-query'
-import {Player} from './serverCalls';
+import {makeApiUrl, Player} from './serverCalls';
 import {Guid} from "./Guid.ts";
 import Column from "./components/Column.tsx";
 
@@ -18,7 +18,7 @@ export default function PlayerInfo({playerId}: { playerId: Guid }) {
         queryKey: ['player'],
         refetchInterval: 1000,
         queryFn: async () => {
-            const url = new URL('/player', import.meta.env.VITE_TANK_API);
+            const url = makeApiUrl('/player');
             url.searchParams.set('id', playerId);
 
             const response = await fetch(url, {method: 'GET'});

tank-frontend/src/Scoreboard.tsx

@@ -1,4 +1,4 @@
-import {Player} from "./serverCalls.tsx";
+import {makeApiUrl, Player} from './serverCalls.tsx';
 import DataTable from "./components/DataTable.tsx";
 import {useQuery} from "@tanstack/react-query";
 
@@ -11,7 +11,7 @@ export default function Scoreboard({}: {}) {
         queryKey: ['scores'],
         refetchInterval: 1000,
         queryFn: async () => {
-            const url = new URL('/scores', import.meta.env.VITE_TANK_API);
+            const url = makeApiUrl('/scores');
             const response = await fetch(url, {method: 'GET'});
             if (!response.ok)
                 throw new Error(`response failed with code ${response.status} (${response.status})${await response.text()}`)

tank-frontend/src/serverCalls.tsx

@@ -1,5 +1,9 @@
 import {Guid} from './Guid.ts';
 
+export function makeApiUrl(path: string, protocol: 'http' | 'ws' = 'http') {
+        return new URL(`${protocol}://${window.location.hostname}${path}`);
+}
+
 export type ServerResponse<T> = {
     ok: boolean;
     statusCode: number;
@@ -29,7 +33,7 @@ export async function fetchTyped<T>({url, method}: { url: URL; method: string; }
         ok: response.ok,
         statusCode: response.status,
         statusText: response.statusText
-    }
+    };
 
     if (response.ok)
         result.successResult = await response.json();
@@ -39,7 +43,7 @@ export async function fetchTyped<T>({url, method}: { url: URL; method: string; }
 }
 
 export function postPlayer({name, id}: NameId) {
-    const url = new URL('/player', import.meta.env.VITE_TANK_API);
+    const url = makeApiUrl('/player');
     url.searchParams.set('name', name);
     url.searchParams.set('id', id);
 

tank-frontend/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig(() => {
         plugins: [react()],
 
         build: {
-            outDir: isContainer ? undefined : '../TanksServer/client',
+            outDir: isContainer ? undefined : '../tanks-backend/TanksServer/client',
             emptyOutDir: true
         }
     };