Build Phase 1 application foundation

client/Dockerfile

@@ -1,14 +1,24 @@
-FROM node:22-alpine AS build
+FROM node:22.23.2-bookworm-slim AS build
+
+ARG PNPM_VERSION=10.29.3
+
 WORKDIR /app
 
-RUN corepack enable
+RUN corepack enable && corepack prepare "pnpm@${PNPM_VERSION}" --activate
 
-COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --frozen-lockfile
+COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
+COPY server/package.json ./server/package.json
+COPY client/package.json ./client/package.json
 
-COPY . .
-RUN pnpm build
+RUN pnpm install --frozen-lockfile --filter @announcements/client...
 
-FROM nginx:alpine
-COPY --from=build /app/dist /usr/share/nginx/html
-EXPOSE 80
+COPY client ./client
+
+RUN pnpm --filter @announcements/client build
+
+FROM nginx:1.30.4-alpine
+
+COPY client/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/client/dist /usr/share/nginx/html
+
+EXPOSE 80

client/nginx.conf

@@ -0,0 +1,42 @@
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' close;
+}
+
+server {
+    listen 80;
+    listen [::]:80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    resolver 127.0.0.11 valid=10s ipv6=off;
+    set $api_origin http://api:7532;
+
+    location ~ ^/(api|health|media)(/|$) {
+        proxy_pass $api_origin;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /socket.io/ {
+        proxy_pass $api_origin;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+        proxy_buffering off;
+        proxy_read_timeout 75s;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

client/package.json

@@ -1,8 +1,11 @@
 {
-  "name": "client",
+  "name": "@announcements/client",
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": ">=22.13.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",

client/src/App.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { io } from "socket.io-client";
 import "./App.css";
 
-const socket = io("http://10.40.0.2:7532");
+const socket = io();
 
 export default function App() {
   const [slides, setSlides] = useState([]);
@@ -64,4 +64,4 @@ export default function App() {
       />
     </div>
   );
-}
+}

client/vite.config.js

@@ -1,7 +1,20 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
+export default defineConfig(({ mode }) => {
+  const environment = loadEnv(mode, ".", "VITE_");
+  const target = environment.VITE_API_PROXY_TARGET || "http://127.0.0.1:7532";
+  const proxy = { target, changeOrigin: true };
+
+  return {
+    plugins: [react()],
+    server: {
+      proxy: {
+        "/api": proxy,
+        "/health": proxy,
+        "/media": proxy,
+        "/socket.io": { ...proxy, ws: true },
+      },
+    },
+  };
+});