Add Docker support with Dockerfile and .dockerignore; implement middleware for API request handling

Author: GeekTrainer

client/.dockerignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist

client/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:lts AS runtime
+WORKDIR /app
+
+COPY . .
+
+RUN npm install
+RUN npm run build
+
+ENV HOST=0.0.0.0
+ENV PORT=4321
+EXPOSE 4321
+CMD node ./dist/server/entry.mjs

client/astro.config.mjs

@@ -7,21 +7,15 @@ import node from '@astrojs/node';
 
 // https://astro.build/config
 export default defineConfig({
+  output: 'server',
+  integrations: [
+    svelte(),
+  ],
   vite: {
-    plugins: [tailwindcss(), svelte()],
-    server: {
-      proxy: {
-        '/api': {
-          target: 'http://localhost:5100',
-          changeOrigin: true,
-        }
-      }
-    }
+    plugins: [tailwindcss(), svelte()]
   },
 
   adapter: node({
     mode: 'standalone'
   }),
-
-  integrations: [svelte()]
 });

client/package-lock.json

@@ -17,6 +17,7 @@
     "typescript": "^5.8.2"
   },
   "devDependencies": {
+    "@types/node": "^22.13.11",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.0.14"

client/package.json

@@ -0,0 +1,47 @@
+import { defineMiddleware } from "astro:middleware";
+
+// Get server URL from environment variable with fallback for local development
+const API_SERVER_URL = process.env.API_SERVER_URL || 'http://localhost:5100';
+
+// Middleware to handle API requests
+export const onRequest = defineMiddleware(async (context, next) => {
+  console.log('Request URL:', context.request.url);
+  
+  // Guard clause: if not an API request, pass through to regular Astro handling
+  if (!context.request.url.includes('/api/')) {
+    return await next();
+  }
+  
+  // API request handling
+  console.log('Forwarding request to server:', API_SERVER_URL);
+  
+  const url = new URL(context.request.url);
+  const apiPath = url.pathname + url.search;
+  
+  // Create a new request to the backend server
+  const serverRequest = new Request(`${API_SERVER_URL}${apiPath}`, {
+    method: context.request.method,
+    headers: context.request.headers,
+    body: context.request.method !== 'GET' && context.request.method !== 'HEAD' ? 
+          await context.request.clone().arrayBuffer() : undefined,
+  });
+  
+  try {
+    // Forward the request to the API server
+    const response = await fetch(serverRequest);
+    const data = await response.arrayBuffer();
+    
+    // Return the response from the API server
+    return new Response(data, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: response.headers,
+    });
+  } catch (error) {
+    console.error('Error forwarding request to API:', error);
+    return new Response(JSON.stringify({ error: 'Failed to reach API server' }), {
+      status: 502,
+      headers: { 'Content-Type': 'application/json' }
+    });
+  }
+});