typescript-express-restore-lost-swagger-ui

Answer

Root cause: tick-137's dependency-free Swagger UI commit was destroyed in a history rewrite + force-push. The board task ("Swagger UI 404") has no memory of it, so the fix is a faithful re-implementation of the proven approach recovered from DuckBrain: no npm dependency (container node_modules are image-frozen, so npm i swagger-ui-dist would fail at deploy), inline HTML served from routes.ts, assets from unpkg CDN, and a per-route CSP override so the rest of the app keeps its strict policy.

Fix — src/routes.ts (the core deliverable):

import { Router, type Request, type Response } from 'express';

const SWAGGER_HTML = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>API Docs</title>
  <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5/swagger-ui.css" />
</head>
<body>
  <div id="swagger-ui"></div>
  <script src="https://unpkg.com/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
  <script>
    window.onload = function () {
      window.ui = SwaggerUIBundle({
        url: '/openapi.json',
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [SwaggerUIBundle.presets.apis],
        layout: 'BaseLayout',
      });
    };
  </script>
</body>
</html>`;

// Relaxed only for this route; the app-wide strict CSP stays untouched.
const SWAGGER_CSP = [
  "default-src 'self'",
  "script-src 'self' 'unsafe-inline' https://unpkg.com",
  "style-src 'self' 'unsafe-inline' https://unpkg.com",
  "img-src 'self' data: https://unpkg.com",
  "font-src 'self' data:",
  "connect-src 'self'",
].join('; ');

export function swaggerRoutes(openApiPath = '/openapi.json'): Router {
  const router = Router();

  // Both path forms: /swagger and /swagger/ (trailing slash)
  router.get(['/swagger', '/swagger/'], (_req: Request, res: Response) => {
    // Remove any app-level CSP set by earlier global middleware, then apply
    // the route-local policy so the two never bleed into each other.
    // NB: res.removeHeader() returns undefined — it cannot be chained.
    res.removeHeader('Content-Security-Policy');
    res
      .set('Content-Security-Policy', SWAGGER_CSP)
      .set('Content-Type', 'text/html; charset=utf-8')
      .set('Cache-Control', 'no-store')
      .send(SWAGGER_HTML.replace('"/openapi.json"', JSON.stringify(openApiPath)));
  });

  return router;
}

Wiring — src/app.ts: register the router after the global strict-CSP middleware so the route handler can override it per-request; keep the existing /openapi.json endpoint (the url the UI boots against):

app.use((_req, res, next) => { res.set('Content-Security-Policy', STRICT_CSP); next(); });
app.use(swaggerRoutes());          // /swagger, /swagger/ → HTML; per-route CSP
app.get('/openapi.json', (_req, res) => res.json(openApiDocument));

Vitest cases — test/swagger.test.ts (the 3 required + 2 edge guards):

it('serves Swagger UI HTML with text/html at /swagger', async () => {
  const res = await request(createApp()).get('/swagger');
  expect(res.status).toBe(200);
  expect(res.headers['content-type']).toMatch(/^text\/html/);
});
it('serves Swagger UI HTML with text/html at /swagger/ (trailing slash)', /* same, /swagger/ */);
it('does not regress /openapi.json', /* expect 200 + application/json + body.openapi */);
it('references swagger-ui-dist@5 from unpkg (dependency-free)', /* html contains unpkg URLs */);
it('overrides CSP on swagger route only', /* swagger CSP has unpkg; /health keeps strict CSP */);