feat(server): serve SPA under / and mount API under /api; multi-stage Dockerfile builds frontend + server

Author: mbertelsen

server/Dockerfile

@@ -1,24 +1,37 @@
-# Dockerfile for editor mock API (TypeScript/Express)
-FROM node:18-alpine AS build
-WORKDIR /app
-# Copy only package.json from the build context. The repo root package-lock.json
-# is not available when building from the subfolder context, which caused
-# BuildKit checksum errors. Use npm ci when a lockfile exists, otherwise
-# fall back to npm install so the build doesn't fail.
-COPY package.json ./
-RUN npm ci --production=false || npm install --production=false
-COPY tsconfig.json ./
-COPY src ./src
+# Multi-stage Dockerfile: build frontend and server, produce single image
+
+# 1) Build web (editor)
+FROM node:20-alpine AS web-build
+WORKDIR /web
+COPY editor/package.json editor/package-lock.json* ./
+WORKDIR /web
+RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+COPY editor/ ./editor
+WORKDIR /web/editor
+RUN npm run build
+
+# 2) Build server
+FROM node:18-alpine AS server-build
+WORKDIR /srv
+COPY server/package.json server/package-lock.json* ./
+RUN if [ -f package-lock.json ]; then npm ci --production=false; else npm install --production=false; fi
+COPY server/ ./server
+WORKDIR /srv/server
 RUN npm run build
 
+# 3) Final image
 FROM node:18-alpine
 WORKDIR /app
-# Install only production deps
-COPY package.json ./
-# If a package-lock.json is present, npm ci will be used; if not, fall back
-# to npm install so the build doesn't fail when the lockfile is absent in the
-# build context (common when CI checkouts or subfolders don't include it).
-RUN npm ci --production || npm install --production
-COPY --from=build /app/dist ./dist
+# Install production deps for server
+COPY server/package.json ./
+RUN if [ -f package-lock.json ]; then npm ci --production; else npm install --production; fi
+
+# Copy built server
+COPY --from=server-build /srv/server/dist ./dist
+
+# Copy built frontend to editor-dist so server can serve it
+COPY --from=web-build /web/editor/dist ./editor-dist
+
 EXPOSE 4000
+ENV NODE_ENV=production
 CMD ["node", "dist/index.js"]

server/src/index.ts

@@ -1,3 +1,5 @@
+import path from "path";
+import fs from "fs";
 import express from "express";
 import cors from "cors";
 
@@ -7,27 +9,39 @@ const PORT = process.env.PORT ? parseInt(process.env.PORT, 10) : 4000;
 app.use(cors({ origin: true }));
 app.use(express.json());
 
-// Simple health endpoint
-app.get("/health", (_req, res) => {
-  res.json({ status: "ok", uptime: process.uptime() });
-});
-
-// Mock auth endpoints for the editor
-let mockUser = {
+// Mock user for auth endpoints
+const mockUser = {
   id: "user-1",
   name: "Demo User",
-  avatar: "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&s=128"
+  avatar:
+    "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&s=128",
 };
 
-app.get("/me", (_req, res) => {
+// API mounted under /api to make it easy to host frontend and backend together
+app.get("/api/health", (_req, res) => {
+  res.json({ status: "ok", uptime: process.uptime() });
+});
+
+app.get("/api/me", (_req, res) => {
   res.json({ authenticated: true, profile: mockUser });
 });
 
-app.post("/logout", (_req, res) => {
-  // for a mock server just return success
+app.post("/api/logout", (_req, res) => {
   res.json({ ok: true });
 });
 
+// Serve static frontend if present in the final image at '../editor-dist'
+const staticPath = path.join(__dirname, "..", "editor-dist");
+if (fs.existsSync(staticPath)) {
+  app.use(express.static(staticPath));
+
+  // SPA fallback: any non-API route should return index.html so the client-side router can handle it
+  app.get("/*", (req, res, next) => {
+    if (req.path.startsWith("/api/")) return next();
+    res.sendFile(path.join(staticPath, "index.html"));
+  });
+}
+
 app.listen(PORT, () => {
   console.log(`Server running on http://localhost:${PORT}`);
 });