T
TanStack•4w ago
wise-white

Vercel preset not deploying automatically

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?
5 Replies
wise-white
wise-whiteOP•4w ago
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..
extended-salmon
extended-salmon•3w ago
@too_easy did you need to specify a build output directory when you did this? If so, what was it? Encountering the same error now.
wise-white
wise-whiteOP•3w ago
If you’re using an nx monorepo I can send you my setup. It works pretty well now
extended-salmon
extended-salmon•2w ago
Yeah that would be amazing ty 🙏
wise-white
wise-whiteOP•2w ago
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"
      }
    }
  }
}
{
  "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(),
  ],
});
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 From your project root

Did you find this page helpful?