feat: Add Docker support for streamlined deployment and serve frontend assets

Signed-off-by: Andre Bossard <anbossar@microsoft.com>

Author: abossard

.dockerignore

@@ -0,0 +1,10 @@
+.git
+.gitignore
+node_modules
+frontend/node_modules
+backend/venv
+.venv
+__pycache__
+playwright-report
+test-results
+*.log

Dockerfile

@@ -0,0 +1,31 @@
+# syntax=docker/dockerfile:1
+
+# =========================
+# Frontend build stage
+# =========================
+FROM node:20-slim AS frontend-builder
+WORKDIR /app/frontend
+
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend/ ./
+RUN npm run build
+
+# =========================
+# Backend runtime stage
+# =========================
+FROM python:3.11-slim AS runtime
+ENV PYTHONUNBUFFERED=1
+WORKDIR /app/backend
+
+COPY backend/requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend/ ./
+COPY --from=frontend-builder /app/frontend/dist /app/frontend-dist
+
+ENV FRONTEND_DIST=/app/frontend-dist
+EXPOSE 5001
+
+CMD ["hypercorn", "--bind", "0.0.0.0:5001", "app:app"]

README.md

@@ -57,6 +57,19 @@ Use the “Full Stack: Backend + Frontend” launch config to start backend + fr
 - Tasks tab should show three sample tasks (seeded by `TaskService.initialize_sample_data()`)
 - Create a task, mark it complete, delete it—confirm state updates instantly
 
+## Docker (one command delivery)
+
+Need everything in a single container? The repo now includes a multi-stage `Dockerfile` that builds the Vite frontend, copies the static assets next to the Quart app, and serves everything through Hypercorn on port `5001`.
+
+```bash
+docker build -t quart-react-demo .
+docker run --rm -p 5001:5001 quart-react-demo
+```
+
+- The container exposes only the backend port; the frontend is served by Quart from the built assets, so open `http://localhost:5001`.
+- Set `-e FRONTEND_DIST=/custom/path` if you mount a different build output at runtime.
+- Hot reloading is not part of the container flow—use the regular dev servers for iterative work and Docker for demos or deployment.
+
 ## Using the app
 - **Dashboard tab:** Streams `{"time","date","timestamp"}` via EventSource; connection errors show inline.
 - **Tasks tab:** Uses FluentUI `DataGrid` + dialogs; `frontend/src/features/tasks/TaskList.jsx` keeps calculations (`getTaskStats`) separate from actions (API calls).

backend/app.py

@@ -15,22 +15,20 @@
 Key insight: Define operation with type hints, get REST + MCP + validation automatically!
 """
 
-from quart import Quart, jsonify, request
-from quart_cors import cors
-from datetime import datetime
 import asyncio
 import json
-from pydantic import ValidationError
-
-# Import Pydantic models and service
-from tasks import (
-    Task, TaskCreate, TaskUpdate, TaskFilter, TaskStats,
-    TaskService
-)
+import os
+from datetime import datetime
+from pathlib import Path
 
 # Import unified operation system
-from api_decorators import operation, get_mcp_tools, get_operation
-
+from api_decorators import get_mcp_tools, get_operation, operation
+from pydantic import ValidationError
+from quart import Quart, jsonify, request, send_from_directory
+from quart_cors import cors
+# Import Pydantic models and service
+from tasks import (Task, TaskCreate, TaskFilter, TaskService, TaskStats,
+                   TaskUpdate)
 
 # ============================================================================
 # APPLICATION SETUP
@@ -282,6 +280,28 @@ async def generate_time_events():
     }
 
 
+frontend_dist_path = Path(
+    os.getenv(
+        "FRONTEND_DIST",
+        Path(__file__).resolve().parents[1] / "frontend" / "dist"
+    )
+)
+
+if frontend_dist_path.exists() and (frontend_dist_path / "index.html").exists():
+    @app.route("/", defaults={"path": ""})
+    @app.route("/<path:path>")
+    async def serve_frontend(path: str):
+        """Serve the built frontend assets when available."""
+        if path.startswith("api") or path.startswith("mcp"):
+            return jsonify({"error": "Not Found"}), 404
+
+        candidate = frontend_dist_path / path
+        if path and candidate.exists() and candidate.is_file():
+            return await send_from_directory(frontend_dist_path, path)
+
+        return await send_from_directory(frontend_dist_path, "index.html")
+
+
 # ============================================================================
 # MCP JSON-RPC ENDPOINT
 # ============================================================================
@@ -312,6 +332,14 @@ async def mcp_json_rpc():
         params = data.get("params", {})
         request_id = data.get("id")
 
+        # Notifications (no response required but we acknowledge for logs)
+        if method == "notifications/initialized":
+            return jsonify({
+                "jsonrpc": "2.0",
+                "result": None,
+                "id": request_id
+            }), 200
+
         # Initialize
         if method == "initialize":
             return jsonify({