feat: Containerize frontend and backend services with Docker and Docker Compose, enabling environment-based API configuration.

k-notes-frontend/Dockerfile

@@ -0,0 +1,29 @@
+# Build stage
+FROM oven/bun:1 AS builder
+
+WORKDIR /app
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile
+
+COPY . .
+RUN bun run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built assets
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Create script to generate env-config.js from environment variables
+RUN echo '#!/bin/sh' > /docker-entrypoint.d/40-env-config.sh && \
+    echo 'echo "window.env = {" > /usr/share/nginx/html/env-config.js' >> /docker-entrypoint.d/40-env-config.sh && \
+    echo 'if [ -n "$API_URL" ]; then echo "  API_URL: \"$API_URL\"," >> /usr/share/nginx/html/env-config.js; fi' >> /docker-entrypoint.d/40-env-config.sh && \
+    echo 'echo "};" >> /usr/share/nginx/html/env-config.js' >> /docker-entrypoint.d/40-env-config.sh && \
+    chmod +x /docker-entrypoint.d/40-env-config.sh
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

k-notes-frontend/index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/png" href="/logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="/env-config.js"></script>
   <title>K-Notes</title>
 </head>
 

k-notes-frontend/nginx.conf

@@ -0,0 +1,14 @@
+server {
+    listen 80;
+    
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Optional: Proxy API requests if using same domain (not needed for this specific setup but good to have)
+    # location /api {
+    #     proxy_pass http://backend:3000;
+    # }
+}

k-notes-frontend/src/lib/api.ts

@@ -1,9 +1,29 @@
+declare global {
+    interface Window {
+        env?: {
+            API_URL?: string;
+        };
+    }
+}
+
 const getApiUrl = () => {
+    // 1. Runtime config (Docker)
+    if (window.env?.API_URL) {
+        return `${window.env.API_URL}/api/v1`;
+    }
+    // 2. LocalStorage override
     const stored = localStorage.getItem("k_notes_api_url");
-    return stored ? `${stored}/api/v1` : "http://localhost:3000/api/v1";
+    if (stored) {
+        return `${stored}/api/v1`;
+    }
+    // 3. Default fallback
+    return "http://localhost:3000/api/v1";
 };
 
 export const getBaseUrl = () => {
+    if (window.env?.API_URL) {
+        return window.env.API_URL;
+    }
     const stored = localStorage.getItem("k_notes_api_url");
     return stored ? stored : "http://localhost:3000";
 }