From 558a83990750b68bb5f3f70303e8dc586a94e0d4 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Thu, 8 May 2025 13:22:28 +0200 Subject: [PATCH 1/2] Improve vite development server config --- package-lock.json | 8 ++++---- package.json | 2 +- server/index.ts | 29 ++++++++++++++++++----------- tests/mocks/index.ts | 4 ++++ 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0cdf05860..9c8251759 100644 --- a/package-lock.json +++ b/package-lock.json @@ -117,7 +117,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", @@ -15956,9 +15956,9 @@ } }, "node_modules/react-router-devtools": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/react-router-devtools/-/react-router-devtools-5.0.1.tgz", - "integrity": "sha512-WHxixi3kIfc7zN0mKdftnluwriPLvtlDP8gxPU4w19FWB5I3yKuHxFimpHJjNDm+uapSY8Cwf8fhISAxu/QlOg==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/react-router-devtools/-/react-router-devtools-5.0.3.tgz", + "integrity": "sha512-Qi8dK/p62EE2waVmNv5jn/NXDs2e3xJrfBG5t3sp22q/aWU49/Z17ocUewlWw6CAPXPsbthsLyFuuj0mQ2QJdw==", "dev": true, "license": "MIT", "workspaces": [ diff --git a/package.json b/package.json index 107ab726d..b485dc70a 100644 --- a/package.json +++ b/package.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", diff --git a/server/index.ts b/server/index.ts index dd5dc8790..b706e59e8 100644 --- a/server/index.ts +++ b/server/index.ts @@ -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( diff --git a/tests/mocks/index.ts b/tests/mocks/index.ts index 5158a53c8..ea52c807f 100644 --- a/tests/mocks/index.ts +++ b/tests/mocks/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() }, From 334d14669d3f65018932eddf85835c7a5b0e9b50 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Thu, 8 May 2025 15:27:31 +0200 Subject: [PATCH 2/2] revert the port number --- package-lock.json | 8 ++++---- package.json | 4 ++-- server/index.ts | 22 ++++++++++------------ 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9c8251759..5ee3db1ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -117,7 +117,7 @@ "prettier": "^3.5.3", "prettier-plugin-sql": "^0.19.0", "prettier-plugin-tailwindcss": "^0.6.11", - "react-router-devtools": "^5.0.3", + "react-router-devtools": "^5.0.4", "remix-flat-routes": "^0.8.5", "tsx": "^4.19.4", "tw-animate-css": "^1.2.9", @@ -15956,9 +15956,9 @@ } }, "node_modules/react-router-devtools": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/react-router-devtools/-/react-router-devtools-5.0.3.tgz", - "integrity": "sha512-Qi8dK/p62EE2waVmNv5jn/NXDs2e3xJrfBG5t3sp22q/aWU49/Z17ocUewlWw6CAPXPsbthsLyFuuj0mQ2QJdw==", + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/react-router-devtools/-/react-router-devtools-5.0.4.tgz", + "integrity": "sha512-iTWKNOOPZYMH6pYCoPc0aOFu0F5uVHc//Ugo90SRFqajPf4GRM5jFvrlmvNvxC98yp3ceJDit6Hargml9JpLtA==", "dev": true, "license": "MIT", "workspaces": [ diff --git a/package.json b/package.json index b485dc70a..2afcdf4eb 100644 --- a/package.json +++ b/package.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.3", + "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" -} +} \ No newline at end of file diff --git a/server/index.ts b/server/index.ts index b706e59e8..b55f22cf1 100644 --- a/server/index.ts +++ b/server/index.ts @@ -21,24 +21,12 @@ 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, - // 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 @@ -225,6 +213,16 @@ 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(