T
TanStack•4mo ago
generous-apricot

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
generous-apricot
generous-apricotOP•4mo 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..
xenial-black
xenial-black•4mo 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.
generous-apricot
generous-apricotOP•4mo ago
If you’re using an nx monorepo I can send you my setup. It works pretty well now
xenial-black
xenial-black•4mo ago
Yeah that would be amazing ty 🙏
generous-apricot
generous-apricotOP•4mo 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?