Skip to content
Netlify Docs

See what shipped at NTL DEPLOY. Try the new AI workflow →

TanStack Start on Netlify

TanStack Start is a React-based full-stack framework that is optimized for serving dynamic apps with an Enterprise-grade fully-featured routing system. TanStack Start is powered by TanStack Router, which you can use with any JavaScript framework. TanStack Start for Solid.js is also fully supported.

TanStack Start apps are fully supported on Netlify. SSR, Server Routes, Server Functions, and middleware are all seamlessly deployed to Netlify serverless functions.

TanStack Router

Section titled “TanStack Router”

TanStack Router offers a fully-featured routing system with deep TypeScript support and type-safe routing. You can use the TanStack router with any JavaScript based framework.

TanStack Router includes the following benefits:

  • nested routing system so you can make dynamic layouts easier
  • built-in data fetching and caching with TanStack Query
  • designed to be as type-safe as possible
  • full-document SSR
  • server functions
  • streaming
  • bundling

Learn more about TanStack’s capabilities in the official TanStack docs.

Deploy to Netlify

Section titled “Deploy to Netlify”

To deploy a new TanStack Start app on Netlify, we recommend our official template but you can also deploy quickly with your own app.

Deploy from a template

Section titled “Deploy from a template”

This TanStack template app is built with TanStack Router, Sentry, and Claude AI.

You can deploy this app directly from the Netlify UI or by clicking the Deploy to Netlify button at the top of this page.

To deploy from the Netlify UI:

  1. Go to your Netlify team dashboard or sites overview landing page at https://app.netlify.com/teams/<YOUR-TEAM-NAME>/projects.
  2. Select Add new project, then choose Start from template.
  3. Choose the TanStack template project.
  4. Follow the setup prompts to complete your first app deploy with Netlify.

Deploy with create-tsrouter-app

Section titled “Deploy with create-tsrouter-app”

From the terminal, you can generate your own TanStack starter app with this command:

Terminal window
npx create-tsrouter-app@latest --template file-router --add-ons tanchat,netlify

Next, you can follow these steps to deploy your app to Netlify or use the Netlify CLI.

Deploy manually

Section titled “Deploy manually”

If you’ve got your own Tanstack Start app and want to deploy to Netlify you should have the following configured in your project.

  1. Install and configure the Netlify TanStack Start Vite plugin:
Terminal window
npm install -D @netlify/vite-plugin-tanstack-start
  1. In your Tanstack Start app’s vite.config.ts file, add the plugin:
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import netlify from '@netlify/vite-plugin-tanstack-start'


export default defineConfig({
  plugins: [
    // ...
    tanstackStart(),
    netlify(),
  ],
})
  1. Finally, add a netlify.toml to your project with these contents:
[build]
  command = "vite build"
  publish = "dist/client"

Alternatively, you can configure these build settings in the Netlify Dashboard. For your chosen project, go to project configuration Build & deploy Continuous deployment Build settings and enter the settings above.

Your site should successfully deploy on your next push. 🚀

TanStack Start versions before 1.132.0

Section titled “TanStack Start versions before 1.132.0”

If you’re using TanStack Start versions before 1.132.0, you’ll need to configure things differently:

For versions 1.121.0 to 1.131.x

Section titled “For versions 1.121.0 to 1.131.x”

Use the target: 'netlify' option in your vite.config.ts instead of the Netlify TanStack Start Vite plugin:

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'


export default defineConfig({
  plugins: [tanstackStart({ target: 'netlify' })],
})

Set your build command to dist instead of dist/client:

[build]
  command = "vite build"
  publish = "dist"

For versions before 1.121.0

Section titled “For versions before 1.121.0”

Use app.config.ts instead of vite.config.ts:

import { defineConfig } from '@tanstack/react-start/config'


export default defineConfig({
  server: {
    preset: 'netlify',
  },
})

Set your build command to vinxi build instead of vite build.

Local development

Section titled “Local development”

The Netlify TanStack Start Vite plugin provides all the benefits of the Netlify Vite plugin: full emulation of the production Netlify platform. This gives you the same platform primitives locally that your site uses in production.

You or an agent can access and build with the following features when running a TanStack Start dev server in your local development flow:

  • Serverless functions
  • Edge functions
  • Blobs
  • Cache API
  • Image CDN
  • Redirects & rewrites
  • Headers
  • Environment variables

Further help

Section titled “Further help”

Learn more from the official TanStack docs.