feat: dockerization

frontend/.dockerignore

@@ -0,0 +1,22 @@
+node_modules
+npm-debug.log
+yarn-error.log
+build
+dist
+*.log
+*.swp
+*.swo
+*.DS_Store
+*.git
+*.gitignore
+*.gitattributes
+.DS_Store
+.idea
+.vscode
+*.zip
+*.tar.gz
+*.tgz
+.env
+.env.local
+.env.*.local
+.env.production

frontend/Dockerfile

@@ -0,0 +1,29 @@
+# Frontend Dockerfile
+FROM node:20 AS builder
+
+WORKDIR /app
+
+ARG VITE_BACKEND_URL
+ARG VITE_BACKEND_STREAMS_PATH
+ARG VITE_STREAM_DELAY
+
+# Install dependencies
+COPY package.json package-lock.json ./
+RUN npm install
+
+# Copy source code and build
+COPY . .
+
+ENV VITE_BACKEND_URL=$VITE_BACKEND_URL
+ENV VITE_BACKEND_STREAMS_PATH=$VITE_BACKEND_STREAMS_PATH
+ENV VITE_STREAM_DELAY=$VITE_STREAM_DELAY
+
+RUN npm run build
+
+# Serve the app using a minimal HTTP server
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/src/services/ApiService.ts

@@ -10,7 +10,7 @@ const apiService = {
    * @param body - The request body (e.g. POST)
    * @returns Ein Promise with the parsed JSON response to class T
    */
-  async request<T>(path: string, method: HttpMethod = 'GET', api_url: string = API_BASE_URL, body?: unknown): Promise<T> {
+  async request<T>(path: string, method: HttpMethod = 'GET', api_url: string = API_BASE_URL + '/api', body?: unknown): Promise<T> {
     try {
       const options: RequestInit = {
         method,

frontend/src/services/SocketService.ts

@@ -9,7 +9,8 @@ class SocketService {
   connect() {
     if (this.socket?.connected) return;
 
-    console.log('Connecting to WebSocket server');
+    console.log('Connecting to WebSocket server: ');
+    // Default Behavior: If 'VITE_BACKEND_URL' is not set, the app will use the same host name as the frontend
     this.socket = io(import.meta.env.VITE_BACKEND_URL);
 
     this.socket.on('connect', () => {