.

Author: kantord

docs/mocks.md

@@ -8,7 +8,7 @@ MSW Auto-Mocker
 Usage
 - Vitest: tests initialize MSW in `src/mocks/test.setup.ts`. Run `pnpm test`.
 - Browser (optional): call `startWorker()` from `src/mocks/browser.ts` in your development entry point to mock requests in the browser.
-- Standalone server (dev): `pnpm mock:server` starts an HTTP mock server at `http://localhost:9090` (configurable with `MOCK_PORT`). Point API requests or Next.js rewrites to this origin to develop without a live backend.
+- Standalone server (dev): `pnpm mock:server` starts an HTTP mock server at `http://localhost:9090`. In dev, Next.js rewrites proxy `/registry/*` to this origin; use relative URLs like `/registry/v0.1/servers` from both client and server code.
 
 Regeneration
 - Delete a fixture file to re-generate it on next request.
@@ -17,5 +17,6 @@ Failure behavior (always strict)
 - If a schema is missing or faker fails, the handler responds 500 and does not write a placeholder.
 - Invalid fixtures (including empty `{}` when the schema defines properties) respond 500.
 
-Types (optional)
-- If you expose OpenAPI response types under `@api/types.gen`, set `USE_TYPES_FOR_FIXTURES = true` in `src/mocks/mocker.ts` to add a `satisfies` clause in generated fixtures.
+Types
+- Fixtures default to strict types. Generated modules import response types from `@api/types.gen` and use a `satisfies` clause to ensure compatibility.
+- Make sure `tsconfig.json` includes: `"paths": { "@api/*": ["./src/generated/*"] }`.

next.config.ts

@@ -1,7 +1,6 @@
 import type { NextConfig } from "next";
 
 const isDev = process.env.NODE_ENV !== "production";
-const mockOrigin = process.env.MOCK_SERVER_ORIGIN || "http://localhost:9090";
 
 const nextConfig: NextConfig = {
   /* config options here */
@@ -13,7 +12,7 @@ const nextConfig: NextConfig = {
       // Proxy registry API to the local MSW mock server in dev
       {
         source: "/registry/:path*",
-        destination: `${mockOrigin}/registry/:path*`,
+        destination: "http://localhost:9090/registry/:path*",
       },
     ];
   },

src/app/catalog/page.tsx

@@ -12,19 +12,15 @@ export default async function CatalogPage() {
     redirect("/signin");
   }
 
-  // Load server registry summary (SSR). In dev, target the mock server.
+  // Load server registry summary (SSR). Use a relative URL so dev rewrites
+  // proxy to the standalone mock server.
   let serversSummary: {
     count: number;
     titles: string[];
     sample: Array<{ title: string; name: string; version?: string }>;
   } = { count: 0, titles: [], sample: [] };
   try {
-    const base =
-      process.env.MOCK_SERVER_ORIGIN ||
-      (process.env.NODE_ENV !== "production" ? "http://localhost:9090" : "");
-    const url = base
-      ? `${base}/registry/v0.1/servers`
-      : "/registry/v0.1/servers";
+    const url = "/registry/v0.1/servers";
     const res = await fetch(url);
     if (process.env.NODE_ENV !== "production") {
       // eslint-disable-next-line no-console

src/app/page.tsx

@@ -12,19 +12,14 @@ export default async function Home() {
     redirect("/signin");
   }
 
-  // Try to load servers list from the registry API (SSR).
-  // In dev, prefer the standalone mock server to validate server-side fetches.
+  // Try to load servers list from the registry API (SSR). Uses a relative URL
+  // so Next.js dev rewrites can proxy to the standalone mock server.
   let serversSummary: { count: number; titles: string[] } = {
     count: 0,
     titles: [],
   };
   try {
-    const base =
-      process.env.MOCK_SERVER_ORIGIN ||
-      (process.env.NODE_ENV !== "production" ? "http://localhost:9090" : "");
-    const url = base
-      ? `${base}/registry/v0.1/servers`
-      : "/registry/v0.1/servers";
+    const url = "/registry/v0.1/servers";
     const res = await fetch(url);
     if (process.env.NODE_ENV !== "production") {
       // eslint-disable-next-line no-console

src/mocks/fixtures/README.md

@@ -7,7 +7,6 @@ Fixtures are auto-generated on first run by the MSW Auto-Mocker.
 Notes
 - Non-schema mocks in `src/mocks/customHandlers` take precedence over schema-based mocks.
 - To re-generate a fixture, delete the file; it will be recreated on next request.
-- If your project exposes OpenAPI response types via `@api/types.gen`, you can
-  enable type enforcement by setting `USE_TYPES_FOR_FIXTURES = true` in
-  `src/mocks/mocker.ts`.
+- Fixtures are type-checked against OpenAPI response types via `@api/types.gen` by default.
+- Ensure `tsconfig.json` defines: `"paths": { "@api/*": ["./src/generated/*"] }`.
 - Always strict: missing/failed generation returns 500 (no placeholder), and invalid fixtures return 500.

src/mocks/mocker.ts

@@ -12,7 +12,8 @@ import { buildMockModule } from "./mockTemplate";
 // ===== Config =====
 // Adjust the path of the OpenAPI JSON here if needed.
 // This repo keeps it at project root as `swagger.json`.
-const USE_TYPES_FOR_FIXTURES = false; // set true if you have @api/types.gen alias
+// Generate typed fixtures that satisfy OpenAPI response types under @api/types.gen
+const USE_TYPES_FOR_FIXTURES = true;
 
 // Strip these noisy prefixes from generated fixture folder names.
 const PREFIXES_TO_STRIP = ["api_v1beta_", "api_v0_"];

src/mocks/server.ts

@@ -2,8 +2,8 @@ import type { IncomingMessage, ServerResponse } from "node:http";
 import { createServer } from "@mswjs/http-middleware";
 import { handlers } from "./handlers";
 
-const DEFAULT_PORT = 9090;
-const port = Number(process.env.MOCK_PORT || DEFAULT_PORT);
+// Fixed port for the standalone mock server
+const port = 9090;
 
 const httpServer = createServer(...handlers);
 

tsconfig.json

@@ -19,7 +19,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@api/*": ["./src/generated/*"]
     }
   },
   "include": [