# Deploy a TanStack Start app to Vercel **Author:** Ben Sabic --- [TanStack Start](https://vercel.com/docs/frameworks/full-stack/tanstack-start) is a full-stack framework powered by TanStack Router for React and Solid, with support for full-document SSR, streaming, server functions, and bundling. It runs on Vercel when paired with Nitro, the server toolkit that builds your app for the Vercel runtime. Vercel detects TanStack Start and Nitro automatically, so once the Nitro plugin is in place, you can deploy from Git or the CLI without extra build configuration. This guide walks you through installing the Nitro plugin, registering it in your Vite config, and deploying your TanStack Start app to Vercel with [Git](https://git-scm.com/) or the [Vercel CLI](https://vercel.com/docs/cli) so it builds and serves routes correctly. You'll also verify the live deployment, learn how Vercel runs your server functions on [Fluid compute](https://vercel.com/fluid) by default, and fix common framework detection issues, such as a missing TanStack Start preset in a monorepo. ## Prerequisites Before you begin, make sure you have: - A [Vercel account](https://vercel.com/signup) - Node.js 20+ and a package manager (e.g., npm). - An existing TanStack Start project, or a new one created from the [Vercel template](https://vercel.com/templates/other/tanstack-start-on-vercel) - A Git repository on GitHub, GitLab, or Bitbucket (if you want Git-based deployments) ## How it works TanStack Start apps are built on Vercel with Nitro. The [Nitro Vite](https://vercel.com/kb/guide/nitro-vite-plugin) plugin compiles your server code into output that Vercel deploys as [Vercel Functions](https://vercel.com/docs/functions). By default, Vercel runs these functions on Fluid compute, so your app scales with traffic, and you pay only for what you use, not for idle function time. Because Vercel ships zero-configuration detection for both TanStack Start and Nitro, you don't need to set a build command or output directory. Vercel reads your project, identifies the framework, and applies the correct settings. ## Steps ### 1\. Add the Nitro plugin to your project If you created your project from the Vercel template, Nitro is already configured, so you can skip to [step two](https://vercel.com/kb/guide/deploy-a-tanstack-start-app-to-vercel#2.-register-nitro-in-your-vite-config). For an existing project, install `nitro` from the root directory using your preferred package manager: `# npm npm install nitro # pnpm pnpm add nitro # yarn yarn add nitro` ### 2\. Register Nitro in your Vite config Add the `nitro` plugin to the `plugins` array in your `vite.config.ts` file. Place it alongside the TanStack Start and React plugins: `import { tanstackStart } from '@tanstack/react-start/plugin/vite'; import { defineConfig } from 'vite'; import viteReact from '@vitejs/plugin-react'; import { nitro } from 'nitro/vite'; export default defineConfig({ plugins: [tanstackStart(), nitro(), viteReact()], });` For a Solid project, swap the React plugins for their Solid equivalents and keep the `nitro()` plugin in place. ### 3\. Set environment variables If your TanStack Start app uses private API keys or other secrets, save them to Vercel before deploying. Open your project's [Environment Variables settings](https://vercel.com/d?to=%2F%5Bteam%5D%2F%5Bproject%5D%2Fsettings%2Fenvironment-variables), add each key-value pair, and select the applicable environments (Production, Preview, and Development). Since TanStack Start apps are built with Vite, the `VITE_` prefix determines where a variable is available: - Variables prefixed with `VITE_` are bundled into your client-side code and readable in the browser through `import.meta.env`. Use this only for values that are safe to make public (e.g., publishable API keys). - Variables without the prefix never reach the client bundle. They stay available to server-side code, such as and loaders, through `process.env`. Keep secrets like database credentials and private API keys unprefixed. > **Warning:** Never store a secret in a `VITE_` variable. Anything with that prefix ships to the browser and can be read by anyone who visits your site. To run your app locally with the same values, pull them into a `.env` file with the CLI: `vercel env pull` After you change a variable in Vercel, redeploy for the change to take effect. Existing deployments keep the values they were built with. ### 4\. Deploy your app When deploying your TanStack Start project to Vercel, you have two options. **Deploy from Git:** 1. Commit and push your project to a Git repository. 2. Go to the [new project page](https://vercel.com/new) and import the repository. 3. Vercel detects TanStack Start and fills in the build settings for you. Confirm the framework preset reads **TanStack Start**, then select **Deploy**. Each push to your main branch triggers a new deployment from now on. **Install the Vercel CLI and deploy:** `npm install -g vercel vercel` The CLI guides you through linking the project to Vercel, then builds and deploys it to your [preview environment](https://vercel.com/docs/deployments/environments#preview-environment-pre-production). That same deployment can be promoted to production with `vercel promote `, or you can trigger a new one with `vercel --prod`. ### 4\. Verify your deployment After the build finishes, Vercel returns a deployment URL. Open it and verify that: - The page renders with server-side content - Navigating between routes works without errors - Any server functions return the expected responses If the home page loads but routes return 404 errors, confirm that `nitro()` is present in your Vite config and redeploy. Routing failures on Vercel usually stem from a missing or misplaced Nitro plugin. You can also check your [deployment logs](https://vercel.com/d?to=%2F%5Bteam%5D%2F%5Bproject%5D%2Fdeployments) for any errors. ## Troubleshooting ### Framework preset not detected In a monorepo, or in a project that previously used a different framework, Vercel may not automatically detect TanStack Start. You have three ways to set the framework preset: In the dashboard**,** change the **Framework Preset** in your project's [framework settings](https://vercel.com/d?to=%2F%5Bteam%5D%2F%5Bproject%5D%2Fsettings%2Fbuild-and-deployment%23framework-settings). In `vercel.json`: `{ "framework": "tanstack-start" }` With the Vercel CLI (v54.21.1+): `vercel project update --framework tanstack-start` ### Build succeeds, but the deployment returns errors Confirm your local build runs cleanly before deploying: `npm run build` Failing local builds indicate a potential issue with the project. Resolve the local error first, then redeploy. If the build passes locally but fails on Vercel, verify that your Node.js version in [project settings](https://vercel.com/d?to=%2F%5Bteam%5D%2F%5Bproject%5D%2Fsettings%2Fbuild-and-deployment%23node.js-version) matches the version you use locally. ## Resources and next steps - Read the full [TanStack Start on Vercel documentation](https://vercel.com/docs/frameworks/full-stack/tanstack-start) - Learn how [Vercel Functions](https://vercel.com/docs/functions) run your server code - Understand pricing and scaling with [Fluid compute](https://vercel.com/docs/fluid-compute) - Explore the [TanStack Start docs](https://tanstack.com/start/latest/docs/framework/react/overview) - Configure Vercel-specific features through the [Nitro Vercel provider docs](https://v3.nitro.build/deploy/providers/vercel) - Learn about [TanStack Intent](https://vercel.com/kb/guide/using-tanstack-intent-to-ship-and-consume-agent-skills) and [TanStack Hotkeys](https://vercel.com/kb/guide/adding-keyboard-shortcuts-to-react-apps-with-tanstack-hotkeys) --- [View full KB sitemap](/kb/sitemap.md)