Files
supabase/apps/studio/scripts/vercel-spa-routes.ts
Alaister YoungandAlaister Young 3bac7165bd chore(studio): move the TanStack Start deploy onto Nitro (#50030)
Moves the Studio TanStack Start build off the hand-rolled Vercel setup
(an `api/server.js` function shim, rewrites in `vercel.ts`, a custom
`?dpl=` skew-protection Vite plugin, and `scripts/serve.js` for
self-hosted) and onto Nitro, which TanStack Start documents as its
deployment path. Documents are served from the static SPA shell on the
CDN; only `/api/*` and `/_serverFn/*` invoke the function.

**Removed:**
- `api/server.js`, `scripts/serve.js`, `scripts/smoke-server.mjs`
- The `skewProtectionDpl` Vite plugin, `renderBuiltUrl`, and the
`vite:preloadError` reload backstop in `router.tsx` (TanStack Router
already reloads once on a failed lazy import)
- Rewrites, `functions`, `outputDirectory`, and `cleanUrls` from
`vercel.ts` (redirects and headers stay)
- `magic-string` and `@jridgewell/remapping` devDependencies, the
`preview` script

**Added:**
- `nitro` plugin in `vite.config.ts`. Preset is auto-detected:
`.vercel/output` on Vercel, a self-contained node server in `.output`
everywhere else. `vercel.immutableStaticFiles` puts hashed chunks under
`/_vercel/immutable/` so tabs opened before a redeploy keep loading
their chunks; `functions.maxDuration: 300` carries over the old function
timeout
- `scripts/vercel-spa-routes.ts`: Nitro module that rewrites the
generated Build Output routes (documents -> `_shell.html`, allow-list ->
`__server`, missing chunk -> 404, base-path prefixes), with a unit test
- `server.ts`: TanStack Start server entry that initializes Sentry
before the route tree loads and wraps the handler with
`wrapFetchWithSentry`

**Changed:**
- `start:tanstack` runs `.output/server/index.mjs` directly with Node's
`--env-file-if-exists` for the `.env` cascade. Node doesn't expand
`$VAR` references, so `scripts/generateLocalEnv.js` now writes literal
values into `.env.test`
- Dockerfile's TanStack stage copies `.output` instead of running `pnpm
deploy`; the `server.js` shim loads `.env` and imports the Nitro server
- `NEXT_PUBLIC_BASE_PATH` (the platform's `/dashboard`) only sets the
router basepath; Vite's `base` stays at the root so chunks can use the
immutable store. The routes module emits prefixed rules for
`/dashboard/api/*` and `/dashboard/_serverFn/*` and rewrites `public/`
files requested under the prefix back to the root
- Self-hosted security headers come from a Nitro `routeRules` entry; on
Vercel they stay in `vercel.ts`
- `tslib` is inlined for the build only: Nitro's dev runner has no
interop for its CJS wrapper
- Monaco's worker chunks follow the client assets dir so they land in
the immutable store too

Verified on the `studio-staging` preview (`STUDIO_FRAMEWORK=tanstack` is
scoped to this branch there): documents come back as the static shell,
`/dashboard/api/*` hits the function, `public/` files resolve under the
prefix, a missing immutable chunk 404s. Across two deployments of this
branch, the older deployment's chunks still load from the immutable
store and requests carrying its `__vdpl` cookie are answered by that
deployment. Self-hosted path covered by the TanStack E2E job and the
Docker build job.

## To test

- On the `studio-staging` preview: `/dashboard/project/<ref>` should
show `content-disposition: inline; filename="_shell.html"` and a
single-region `x-vercel-id`; `/dashboard/api/get-utc-time` a two-region
id
- Sign in and click through a few pages, including one that opens Monaco
(SQL editor) so the worker chunks load
- After the next deploy, a tab left open on the previous one should
still navigate (lazy chunks) and call the API without errors
- Self-hosted: `STUDIO_FRAMEWORK=tanstack pnpm --filter studio build &&
pnpm --filter studio start`, then check `/api/platform/profile` and that
responses carry the security headers


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Production TanStack deployments now run on Nitro’s self-contained
server output.
* Vercel routing serves static pages first while directing API and
server-function requests appropriately.
* Server-function requests can include deployment identification for
consistent handling.
* Local environment generation now writes resolved configuration values.

* **Bug Fixes**
  * Improved handling of missing static assets and SPA fallback routing.
* Server-side error monitoring now captures request errors in the new
runtime.

* **Refactor**
* Replaced the legacy production server and smoke-test workflow with
Nitro-based startup.
  * Removed automatic reload handling for stale client assets.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-09-15 21:46:45 +10:00

98 lines
4.0 KiB
TypeScript

import { readFile, writeFile } from 'node:fs/promises'
import { basename, resolve } from 'node:path'
import type { NitroModule } from 'nitro/types'
// Nitro module that makes the Vercel Build Output a static-first SPA: documents
// are served from the prerendered shell on the CDN and only server functions
// and API routes invoke the function. Nitro's own config sends every
// non-static path to the function.
//
// A module rather than config because `nitro({ hooks: { compiled } })`
// REPLACES the vercel preset's `compiled` hook (config.json is never written),
// and `vercel.config.routes` is defu-merged: user routes land above Nitro's
// `handle: filesystem` while its function catch-all is still appended last.
//
// Runs before TanStack Start writes `_shell.html`.
/** Must match `spa.prerender.outputPath` in tanstackStart() (default `/_shell`). */
export const SHELL_PATH = '/_shell.html'
/** Must match `serverFns.base` in tanstackStart() (default `/_serverFn`). */
export const SERVER_FN_BASE = '/_serverFn'
/** Directory under `routes/` that holds the server routes. */
export const API_PREFIX = '/api'
type Route = Record<string, unknown> & {
src?: string
dest?: string
handle?: string
}
/**
* After `handle: filesystem`: only `/_serverFn/*` and `/api/*` reach the
* function, a missing hashed chunk 404s instead of becoming the HTML shell,
* and everything else is the shell.
*
* @param assetsPrefix `/assets`, or `/_vercel/immutable/<salt>/nitro` with
* `vercel.immutableStaticFiles`.
* @param basePath `NEXT_PUBLIC_BASE_PATH` (e.g. `/dashboard`). Pages, API
* routes, server functions and browser asset URLs live under it while the
* static files and immutable store stay at the root. Prefixed rules come
* first and asset requests under the prefix are rewritten to the root.
*/
export function buildSpaRoutes(
generated: Route[],
functionDest: string,
assetsPrefix: string,
basePath = ''
): Route[] {
const fsIndex = generated.findIndex((r) => r.handle === 'filesystem')
if (fsIndex === -1) {
throw new Error('[vercel-spa-routes] generated config has no { handle: "filesystem" }')
}
const before = generated.slice(0, fsIndex)
const after = generated.slice(fsIndex + 1)
const isFunctionCatchAll = (r: Route) => r.src === '/(.*)' && r.dest === functionDest
if (!after.some(isFunctionCatchAll)) {
throw new Error(
`[vercel-spa-routes] expected Nitro catch-all { src: "/(.*)", dest: "${functionDest}" } was not found`
)
}
const kept = after.filter((r) => !isFunctionCatchAll(r) && r.handle !== 'filesystem')
const prefixes = basePath ? [basePath, ''] : ['']
return [
...before,
{ handle: 'filesystem' },
...kept,
...prefixes.flatMap((prefix) => [
{ src: `${prefix}${SERVER_FN_BASE}/(.*)`, dest: functionDest },
{ src: `${prefix}${API_PREFIX}/(.*)`, dest: functionDest },
]),
{ src: `${assetsPrefix}/(.*)`, status: 404 },
...(basePath ? [{ src: `${basePath}/(.*\\.\\w+)`, dest: '/$1' }] : []),
{ src: '/(.*)', dest: SHELL_PATH },
]
}
export function vercelSpaRoutes({ basePath = '' }: { basePath?: string } = {}): NitroModule {
return {
name: 'vercel-spa-routes',
setup(nitro) {
if (nitro.options.preset !== 'vercel') return
nitro.hooks.hook('compiled', async () => {
const configPath = resolve(nitro.options.output.dir, 'config.json')
const functionDest = `/${basename(nitro.options.output.serverDir).replace(/\.func$/, '')}`
const assetsPrefix =
'/' + (nitro.options.buildAssetsDir || 'assets').replace(/^\/|\/$/g, '')
const config = JSON.parse(await readFile(configPath, 'utf8'))
config.routes = buildSpaRoutes(config.routes, functionDest, assetsPrefix, basePath)
await writeFile(configPath, JSON.stringify(config, null, 2))
nitro.logger.success(
`[vercel-spa-routes] documents -> ${SHELL_PATH}, ${basePath}${SERVER_FN_BASE}/* and ${basePath}${API_PREFIX}/* -> ${functionDest}, missing ${assetsPrefix}/* -> 404`
)
})
},
}
}