Vercel preset not deploying automatically | TanStack | Page 1

oblique sleet Jul 30, 2025, 10:39 PM

#

Can see that vite build outputs .tanstack .nitro .vercel with target: "vercel" on the tanstack vite plugin. However when I deploy to vercel, with default output path in build settings, these don't seem to be getting picked up correctly and the old vercel 404 NOT FOUND white page of death shows up. Any ideas why? Should the build options output point to a particular one of those build dirs or is there something in the config I'm missing?

oblique sleet Jul 30, 2025, 11:24 PM

#

Nevermind, got it working, turns out in a monorepo just need to make sure that vite build is run from the nx workspace root, so that the outputs don't build do apps/foo/.vercel but to <root>/.vercel etc..

orchid tapir Aug 8, 2025, 4:56 PM

#

@oblique sleet did you need to specify a build output directory when you did this? If so, what was it? Encountering the same error now.

oblique sleet Aug 10, 2025, 9:46 PM

#

If you’re using an nx monorepo I can send you my setup. It works pretty well now

orchid tapir Aug 15, 2025, 8:19 AM

#

Yeah that would be amazing ty 🙏

oblique sleet Aug 17, 2025, 7:39 AM

#

For a given app - lets call it "web"

apps/web/project.json

{
  "name": "web",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/web",
  "projectType": "application",
  "tags": [],
  "targets": {
    "dev": {
      "executor": "nx:run-commands",
      "options": {
        "command": "bunx vite dev --config apps/web/vite.config.ts"
      }
    },
    "build": {
      "executor": "nx:run-commands",
      "options": {
        "command": "bunx vite build --config apps/web/vite.config.ts"
      }
    }
  }
}

#

apps/web/vite.config.ts:

import { join } from "node:path";

import { workspaceRoot } from "@nx/devkit";
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import pluginExternal from "vite-plugin-external";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  root: workspaceRoot,
  publicDir: join(__dirname, "public"),
  server: {
    port: 3000,
    host: "localhost",
    fs: {
      allow: [workspaceRoot],
    },
  },
  plugins: [
    tsConfigPaths(),
    tailwindcss(),
    tanstackStart({
      target: "vercel",
      customViteReactPlugin: true,
      tsr: {
        srcDirectory: join(__dirname, "src"),
      },
    }),
    viteReact(),
  ],
});

#

Now you can call nx build web or nx dev web

#Vercel preset not deploying automatically