Improve vite development server config (#1007)

Author: AlemTuzlak

package-lock.json

@@ -148,7 +148,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-sql": "^0.19.0",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "react-router-devtools": "^5.0.1",
+    "react-router-devtools": "^5.0.4",
     "remix-flat-routes": "^0.8.5",
     "tsx": "^4.19.4",
     "tw-animate-css": "^1.2.9",
@@ -164,4 +164,4 @@
     "seed": "tsx prisma/seed.ts"
   },
   "prettier": "@epic-web/config/prettier"
-}
+}

package.json

@@ -25,7 +25,12 @@ const viteDevServer = IS_PROD
 	? undefined
 	: await import('vite').then((vite) =>
 			vite.createServer({
-				server: { middlewareMode: true },
+				server: {
+					middlewareMode: true,
+				},
+				// We tell Vite we are running a custom app instead of 
+				// the SPA default so it doesn't run HTML middleware
+				appType: 'custom',
 			}),
 		)
 

server/index.ts

@@ -21,6 +21,10 @@ server.listen({
 		if (request.url.includes('.sentry.io')) {
 			return
 		}
+		// React-router-devtools send custom requests internally to handle some functionality, we ignore those
+		if (request.url.includes('react-router-devtools-request')) {
+			return
+		}
 		// Print the regular MSW unhandled request warning otherwise.
 		print.warning()
 	},