- Added MOCK environment variable/types

- Added `msw` package
- Added/Mocked/Intercepted all favicon requests
- Added/Mocked/Intercepted all HEAD/status requests

.prettierignore

@@ -19,3 +19,6 @@ pnpm-*.yaml
 
 # prisma
 /prisma/migrations
+
+# msw
+/public/mockServiceWorker.*

app/entry.client.tsx

@@ -8,11 +8,21 @@ import { RemixBrowser } from "@remix-run/react";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <RemixBrowser />
-    </StrictMode>,
-  );
+async function prepareApp() {
+  if (ENV.MOCKS) {
+    const { worker } = await import("../tests/mocks/browser");
+    return worker.start();
+  }
+  return Promise.resolve();
+}
+
+prepareApp().then(() => {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>,
+    );
+  });
 });

app/entry.server.tsx

@@ -10,11 +10,24 @@ import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { PassThrough } from "node:stream";
 import { renderToPipeableStream } from "react-dom/server";
+import { server } from "../tests/mocks/node";
 import { getEnv, init } from "./utils/env.server";
 
+// Initialize typesafe environment variables and global ENV object.
 init();
 global.ENV = getEnv();
 
+// Enable API mocking.
+if (ENV.MOCKS) {
+  server.listen();
+  console.info("[MSW] Mocking enabled.");
+  if (ENV.MODE === "development") {
+    server.events.on("request:start", ({ request }) => {
+      console.info(request.method, "[MSW]", request.url);
+    });
+  }
+}
+
 const ABORT_DELAY = 5_000;
 
 export default function handleRequest(

app/root.tsx

@@ -136,7 +136,7 @@ function Document({
   theme,
 }: {
   children: React.ReactNode;
-  env?: Record<string, string>;
+  env?: Record<string, boolean | number | string>;
   theme?: Theme;
 }) {
   return (

app/utils/env.server.ts

@@ -5,6 +5,7 @@ const schema = z.object({
   NODE_ENV: z.enum(["production", "development", "test"] as const),
   DATABASE_URL: z.string(),
   SESSION_SECRET: z.string(),
+  MOCKS: z.enum(["true", "false"] as const).optional(),
 });
 
 declare global {
@@ -39,6 +40,8 @@ export function getEnv() {
   return {
     MODE: process.env.NODE_ENV,
 
+    MOCKS: process.env.MOCKS === "true",
+
     APP_VERSION: packageJSON.version,
 
     /**

package.json

@@ -85,6 +85,7 @@
     "enforce-unique": "^1.2.0",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
+    "msw": "^2.0.8",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.3.5",
@@ -98,5 +99,8 @@
     "node": ">=21.2.0",
     "pnpm": ">=8.10.2"
   },
-  "packageManager": "[email protected]"
-}
+  "packageManager": "[email protected]",
+  "msw": {
+    "workerDirectory": "public"
+  }
+}