Improve vite development server config

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.3",
     "remix-flat-routes": "^0.8.5",
     "tsx": "^4.19.4",
     "tw-animate-css": "^1.2.9",

package.json

@@ -21,11 +21,28 @@ if (SENTRY_ENABLED) {
 	void import('./utils/monitoring.js').then(({ init }) => init())
 }
 
+const desiredPort = Number(process.env.PORT || 3000)
+const portToUse = await getPort({
+	port: portNumbers(desiredPort, desiredPort + 100),
+})
+const portAvailable = desiredPort === portToUse
+if (!portAvailable && !IS_DEV) {
+	console.log(`⚠️ Port ${desiredPort} is not available.`)
+	process.exit(1)
+}
+
 const viteDevServer = IS_PROD
 	? undefined
 	: await import('vite').then((vite) =>
 			vite.createServer({
-				server: { middlewareMode: true },
+				server: {
+					middlewareMode: true,
+					// We tell Vite on what port we're running our dev server
+					port: portToUse,
+				},
+				// We tell Vite we are running a custom app instead of 
+				// the SPA default so it doesn't run HTML middleware
+				appType: 'custom',
 			}),
 		)
 
@@ -208,16 +225,6 @@ app.all(
 	}),
 )
 
-const desiredPort = Number(process.env.PORT || 3000)
-const portToUse = await getPort({
-	port: portNumbers(desiredPort, desiredPort + 100),
-})
-const portAvailable = desiredPort === portToUse
-if (!portAvailable && !IS_DEV) {
-	console.log(`⚠️ Port ${desiredPort} is not available.`)
-	process.exit(1)
-}
-
 const server = app.listen(portToUse, () => {
 	if (!portAvailable) {
 		console.warn(

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()
 	},