feat(frontend): Add flag to mock API during dev mode (#4326)

frontend/.env.sample

@@ -1,4 +1,5 @@
 VITE_BACKEND_BASE_URL="localhost:3000" # Backend URL without protocol (e.g. localhost:3000)
+VITE_MOCK_API="false" # true or false
 
 # GitHub OAuth
 VITE_GITHUB_CLIENT_ID=""

frontend/package.json

@@ -43,7 +43,8 @@
     "ws": "^8.18.0"
   },
   "scripts": {
-    "dev": "npm run make-i18n && remix vite:dev",
+    "dev": "npm run make-i18n && VITE_MOCK_API=false remix vite:dev",
+    "dev:mock": "npm run make-i18n && VITE_MOCK_API=true remix vite:dev",
     "build": "npm run make-i18n && tsc && remix vite:build",
     "start": "npx sirv-cli build/client/ --single",
     "test": "vitest run",

frontend/src/entry.client.tsx

@@ -14,7 +14,10 @@ import "./i18n";
 import store from "./store";
 
 async function prepareApp() {
-  if (process.env.NODE_ENV === "development") {
+  if (
+    process.env.NODE_ENV === "development" &&
+    import.meta.env.VITE_MOCK_API === "true"
+  ) {
     const { worker } = await import("./mocks/browser");
 
     await worker.start({