fix(start-plugin): allow trailing slash in basepath when pre-rendering

e2e/react-start/custom-basepath/package.json

@@ -6,9 +6,16 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development tsx express-server.ts",
     "build": "vite build && tsc --noEmit",
+    "build:prerender": "cross-env MODE=prerender vite build && tsc --noEmit",
+    "build:prerender:trailing": "cross-env MODE=prerender TRAILING_SLASH=true vite build && tsc --noEmit",
     "preview": "vite preview",
     "start": "tsx express-server.ts",
-    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+    "test:e2e:startDummyServer": "node -e 'import(\"./tests/setup/global.setup.ts\").then(m => m.default())' &",
+    "test:e2e:stopDummyServer": "node -e 'import(\"./tests/setup/global.teardown.ts\").then(m => m.default())'",
+    "test:e2e:prerender": "rm -rf port*.txt; cross-env MODE=prerender playwright test --project=chromium",
+    "test:e2e:prerender:trailing": "rm -rf port*.txt; cross-env MODE=prerender TRAILING_SLASH=true playwright test --project=chromium",
+    "test:e2e:ssrMode": "rm -rf port*.txt; playwright test --project=chromium",
+    "test:e2e": "pnpm run test:e2e:ssrMode && pnpm run test:e2e:prerender && pnpm run test:e2e:prerender:trailing"
   },
   "dependencies": {
     "@tanstack/react-router": "workspace:^",

e2e/react-start/custom-basepath/playwright.config.ts

@@ -4,11 +4,36 @@ import {
   getTestServerPort,
 } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
+import { isPrerender } from './tests/utils/isPrerender'
 
 const PORT = await getTestServerPort(packageJson.name)
+const START_PORT = await getTestServerPort(packageJson.name)
 const EXTERNAL_PORT = await getDummyServerPort(packageJson.name)
 const baseURL = `http://localhost:${PORT}/custom/basepath`
 
+const ssrModeCommand = `pnpm build && pnpm start`
+const prerenderModeCommand = `pnpm run test:e2e:startDummyServer && pnpm build:prerender && pnpm run test:e2e:stopDummyServer && pnpm start`
+const prerenderTrailingModeCommand = `pnpm run test:e2e:startDummyServer && pnpm build:prerender:trailing && pnpm run test:e2e:stopDummyServer && pnpm start`
+const isTrailingSlashPrerender =
+  process.env.TRAILING_SLASH?.toLowerCase() === 'true'
+
+const getCommand = () => {
+  if (isPrerender && isTrailingSlashPrerender)
+    return prerenderTrailingModeCommand
+  if (isPrerender) return prerenderModeCommand
+  return ssrModeCommand
+}
+
+console.log(
+  'running in prerender mode: ',
+  isPrerender.toString(),
+  isPrerender
+    ? isTrailingSlashPrerender
+      ? 'with trailing slash'
+      : 'without trailing slash'
+    : '',
+)
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -27,10 +52,20 @@ export default defineConfig({
   },
 
   webServer: {
-    command: `VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} PORT=${PORT} pnpm start`,
+    command: getCommand(),
     url: baseURL,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',
+    env: {
+      MODE: process.env.MODE || '',
+      TRAILING_SLASH: isTrailingSlashPrerender.toString(),
+      VITE_TRAILING_SLASH: isTrailingSlashPrerender.toString(),
+      VITE_NODE_ENV: 'test',
+      VITE_EXTERNAL_PORT: String(EXTERNAL_PORT),
+      VITE_SERVER_PORT: String(PORT),
+      START_PORT: String(START_PORT),
+      PORT: String(PORT),
+    },
   },
 
   projects: [

e2e/react-start/custom-basepath/src/router.tsx

@@ -2,7 +2,6 @@ import { createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
 import { NotFound } from './components/NotFound'
-import { basepath } from './utils/basepath'
 
 export function getRouter() {
   const router = createRouter({
@@ -11,7 +10,7 @@ export function getRouter() {
     defaultErrorComponent: DefaultCatchBoundary,
     defaultNotFoundComponent: () => <NotFound />,
     scrollRestoration: true,
-    basepath: basepath,
+    basepath: import.meta.env.BASE_URL,
   })
 
   return router

e2e/react-start/custom-basepath/src/routes/users.$userId.tsx

@@ -1,15 +1,17 @@
 import { ErrorComponent, createFileRoute } from '@tanstack/react-router'
 import axios from 'redaxios'
+import { getRouterInstance } from '@tanstack/react-start'
 import type { ErrorComponentProps } from '@tanstack/react-router'
-
 import type { User } from '~/utils/users'
 import { NotFound } from '~/components/NotFound'
-import { basepath } from '~/utils/basepath'
 
 export const Route = createFileRoute('/users/$userId')({
   loader: async ({ params: { userId } }) => {
+    const router = await getRouterInstance()
     return await axios
-      .get<User>(basepath + '/api/users/' + userId)
+      .get<User>(`/${router.options.basepath}/api/users/${userId}`, {
+        baseURL: router.origin,
+      })
       .then((r) => r.data)
       .catch(() => {
         throw new Error('Failed to fetch user')

e2e/react-start/custom-basepath/src/routes/users.tsx

@@ -1,12 +1,15 @@
 import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
 import axios from 'redaxios'
+import { getRouterInstance } from '@tanstack/react-start'
 import type { User } from '~/utils/users'
-import { basepath } from '~/utils/basepath'
 
 export const Route = createFileRoute('/users')({
   loader: async () => {
+    const router = await getRouterInstance()
     return await axios
-      .get<Array<User>>(basepath + '/api/users')
+      .get<Array<User>>(`/${router.options.basepath}/api/users`, {
+        baseURL: router.origin,
+      })
       .then((r) => r.data)
       .catch(() => {
         throw new Error('Failed to fetch users')

e2e/react-start/custom-basepath/tests/navigation.spec.ts

@@ -66,7 +66,7 @@ test('server-side redirect', async ({ page, baseURL }) => {
     .get('/redirect/throw-it', { maxRedirects: 0 })
     .then((res) => {
       const headers = new Headers(res.headers())
-      expect(headers.get('location')).toBe('/custom/basepath/redirect/throw-it')
+      expect(headers.get('location')).toBe('/custom/basepath/posts/1')
     })
   await page.request
     .get('/custom/basepath/redirect/throw-it', { maxRedirects: 0 })

e2e/react-start/custom-basepath/tests/utils/isPrerender.ts

@@ -0,0 +1 @@
+export const isPrerender: boolean = process.env.MODE === 'prerender'

e2e/react-start/custom-basepath/vite.config.ts

@@ -3,9 +3,26 @@ import tsConfigPaths from 'vite-tsconfig-paths'
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import { isPrerender } from './tests/utils/isPrerender'
+
+const prerenderConfiguration = {
+  enabled: true,
+  filter: (page: { path: string }) => {
+    return ![
+      '/i-do-not-exist',
+      '/posts',
+      '/redirect',
+      '/this-route-does-not-exist',
+      '/users',
+    ].some((p) => page.path.includes(p))
+  },
+  onSuccess: ({ page }: { page: { path: string } }) => {
+    console.log(`Rendered ${page.path}!`)
+  },
+}
 
 export default defineConfig({
-  base: '/custom/basepath',
+  base: `/custom/basepath${process.env.TRAILING_SLASH?.toLowerCase() === 'true' ? '/' : ''}`,
   server: {
     port: 3000,
   },
@@ -16,6 +33,7 @@ export default defineConfig({
     }),
     tanstackStart({
       vite: { installDevServerMiddleware: true },
+      prerender: isPrerender ? prerenderConfiguration : undefined,
     }),
     viteReact(),
   ],

e2e/solid-start/custom-basepath/package.json

@@ -6,9 +6,16 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development tsx express-server.ts",
     "build": "vite build && tsc --noEmit",
+    "build:prerender": "cross-env MODE=prerender vite build && tsc --noEmit",
+    "build:prerender:trailing": "cross-env MODE=prerender TRAILING_SLASH=true vite build && tsc --noEmit",
     "preview": "vite preview",
     "start": "tsx express-server.ts",
-    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+    "test:e2e:startDummyServer": "node -e 'import(\"./tests/setup/global.setup.ts\").then(m => m.default())' &",
+    "test:e2e:stopDummyServer": "node -e 'import(\"./tests/setup/global.teardown.ts\").then(m => m.default())'",
+    "test:e2e:prerender": "rm -rf port*.txt; cross-env MODE=prerender playwright test --project=chromium",
+    "test:e2e:prerender:trailing": "rm -rf port*.txt; cross-env MODE=prerender TRAILING_SLASH=true playwright test --project=chromium",
+    "test:e2e:ssrMode": "rm -rf port*.txt; playwright test --project=chromium",
+    "test:e2e": "pnpm run test:e2e:ssrMode && pnpm run test:e2e:prerender && pnpm run test:e2e:prerender:trailing"
   },
   "dependencies": {
     "@tanstack/solid-router": "workspace:^",

e2e/solid-start/custom-basepath/playwright.config.ts

@@ -4,11 +4,36 @@ import {
   getTestServerPort,
 } from '@tanstack/router-e2e-utils'
 import packageJson from './package.json' with { type: 'json' }
+import { isPrerender } from './tests/utils/isPrerender'
 
 const PORT = await getTestServerPort(packageJson.name)
+const START_PORT = await getTestServerPort(packageJson.name)
 const EXTERNAL_PORT = await getDummyServerPort(packageJson.name)
 const baseURL = `http://localhost:${PORT}/custom/basepath`
 
+const ssrModeCommand = `pnpm build && pnpm start`
+const prerenderModeCommand = `pnpm run test:e2e:startDummyServer && pnpm build:prerender && pnpm run test:e2e:stopDummyServer && pnpm start`
+const prerenderTrailingModeCommand = `pnpm run test:e2e:startDummyServer && pnpm build:prerender:trailing && pnpm run test:e2e:stopDummyServer && pnpm start`
+const isTrailingSlashPrerender =
+  process.env.TRAILING_SLASH?.toLowerCase() === 'true'
+
+const getCommand = () => {
+  if (isPrerender && isTrailingSlashPrerender)
+    return prerenderTrailingModeCommand
+  if (isPrerender) return prerenderModeCommand
+  return ssrModeCommand
+}
+
+console.log(
+  'running in prerender mode: ',
+  isPrerender.toString(),
+  isPrerender
+    ? isTrailingSlashPrerender
+      ? 'with trailing slash'
+      : 'without trailing slash'
+    : '',
+)
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -27,10 +52,20 @@ export default defineConfig({
   },
 
   webServer: {
-    command: `VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} PORT=${PORT} pnpm start`,
+    command: getCommand(),
     url: baseURL,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',
+    env: {
+      MODE: process.env.MODE || '',
+      TRAILING_SLASH: isTrailingSlashPrerender.toString(),
+      VITE_TRAILING_SLASH: isTrailingSlashPrerender.toString(),
+      VITE_NODE_ENV: 'test',
+      VITE_EXTERNAL_PORT: String(EXTERNAL_PORT),
+      VITE_SERVER_PORT: String(PORT),
+      START_PORT: String(START_PORT),
+      PORT: String(PORT),
+    },
   },
 
   projects: [

e2e/solid-start/custom-basepath/src/router.tsx

@@ -2,7 +2,6 @@ import { createRouter } from '@tanstack/solid-router'
 import { routeTree } from './routeTree.gen'
 import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
 import { NotFound } from './components/NotFound'
-import { basepath } from './utils/basepath'
 
 export function getRouter() {
   const router = createRouter({
@@ -11,7 +10,7 @@ export function getRouter() {
     defaultErrorComponent: DefaultCatchBoundary,
     defaultNotFoundComponent: () => <NotFound />,
     scrollRestoration: true,
-    basepath: basepath,
+    basepath: import.meta.env.BASE_URL,
   })
 
   return router

e2e/solid-start/custom-basepath/src/routes/users.$userId.tsx

@@ -1,15 +1,17 @@
 import { createFileRoute } from '@tanstack/solid-router'
 import axios from 'redaxios'
-
+import { getRouterInstance } from '@tanstack/solid-start'
 import type { User } from '~/utils/users'
 import { NotFound } from '~/components/NotFound'
 import { UserErrorComponent } from '~/components/UserErrorComponent'
-import { basepath } from '~/utils/basepath'
 
 export const Route = createFileRoute('/users/$userId')({
   loader: async ({ params: { userId } }) => {
+    const router = await getRouterInstance()
     return await axios
-      .get<User>(basepath + '/api/users/' + userId)
+      .get<User>(`/${router.options.basepath}/api/users/${userId}`, {
+        baseURL: router.origin,
+      })
       .then((r) => r.data)
       .catch(() => {
         throw new Error('Failed to fetch user')

e2e/solid-start/custom-basepath/src/routes/users.tsx

@@ -1,12 +1,15 @@
 import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
 import axios from 'redaxios'
+import { getRouterInstance } from '@tanstack/solid-start'
 import type { User } from '~/utils/users'
-import { basepath } from '~/utils/basepath'
 
 export const Route = createFileRoute('/users')({
   loader: async () => {
+    const router = await getRouterInstance()
     return await axios
-      .get<Array<User>>(basepath + '/api/users')
+      .get<Array<User>>(`/${router.options.basepath}/api/users`, {
+        baseURL: router.origin,
+      })
       .then((r) => r.data)
       .catch(() => {
         throw new Error('Failed to fetch users')

e2e/solid-start/custom-basepath/tests/navigation.spec.ts

@@ -66,7 +66,7 @@ test('server-side redirect', async ({ page, baseURL }) => {
     .get('/redirect/throw-it', { maxRedirects: 0 })
     .then((res) => {
       const headers = new Headers(res.headers())
-      expect(headers.get('location')).toBe('/custom/basepath/redirect/throw-it')
+      expect(headers.get('location')).toBe('/custom/basepath/posts/1')
     })
   await page.request
     .get('/custom/basepath/redirect/throw-it', { maxRedirects: 0 })

e2e/solid-start/custom-basepath/tests/utils/isPrerender.ts

@@ -0,0 +1 @@
+export const isPrerender: boolean = process.env.MODE === 'prerender'

e2e/solid-start/custom-basepath/vite.config.ts

@@ -3,9 +3,26 @@ import tsConfigPaths from 'vite-tsconfig-paths'
 import { tanstackStart } from '@tanstack/solid-start/plugin/vite'
 import viteSolid from 'vite-plugin-solid'
 import tailwindcss from '@tailwindcss/vite'
+import { isPrerender } from './tests/utils/isPrerender'
+
+const prerenderConfiguration = {
+  enabled: true,
+  filter: (page: { path: string }) => {
+    return ![
+      '/i-do-not-exist',
+      '/posts',
+      '/redirect',
+      '/this-route-does-not-exist',
+      '/users',
+    ].some((p) => page.path.includes(p))
+  },
+  onSuccess: ({ page }: { page: { path: string } }) => {
+    console.log(`Rendered ${page.path}!`)
+  },
+}
 
 export default defineConfig({
-  base: '/custom/basepath',
+  base: `/custom/basepath${process.env.TRAILING_SLASH?.toLowerCase() === 'true' ? '/' : ''}`,
   server: {
     port: 3000,
   },
@@ -14,7 +31,9 @@ export default defineConfig({
     tsConfigPaths({
       projects: ['./tsconfig.json'],
     }),
-    tanstackStart(),
+    tanstackStart({
+      prerender: isPrerender ? prerenderConfiguration : undefined,
+    }),
     viteSolid({ ssr: true }),
   ],
 })

e2e/vue-start/custom-basepath/package.json

@@ -6,9 +6,16 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development tsx express-server.ts",
     "build": "vite build && tsc --noEmit",
+    "build:prerender": "cross-env MODE=prerender vite build && tsc --noEmit",
+    "build:prerender:trailing": "cross-env MODE=prerender TRAILING_SLASH=true vite build && tsc --noEmit",
     "preview": "vite preview",
     "start": "tsx express-server.ts",
-    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+    "test:e2e:startDummyServer": "node -e 'import(\"./tests/setup/global.setup.ts\").then(m => m.default())' &",
+    "test:e2e:stopDummyServer": "node -e 'import(\"./tests/setup/global.teardown.ts\").then(m => m.default())'",
+    "test:e2e:prerender": "rm -rf port*.txt; cross-env MODE=prerender playwright test --project=chromium",
+    "test:e2e:prerender:trailing": "rm -rf port*.txt; cross-env MODE=prerender TRAILING_SLASH=true playwright test --project=chromium",
+    "test:e2e:ssrMode": "rm -rf port*.txt; playwright test --project=chromium",
+    "test:e2e": "pnpm run test:e2e:ssrMode && pnpm run test:e2e:prerender && pnpm run test:e2e:prerender:trailing"
   },
   "dependencies": {
     "@tanstack/vue-router": "workspace:^",