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.

Netlify is a zero-config deployment provider for TanStack Start apps, which means that any TanStack Start app can be deployed directly to Netlify without extra deployment steps or adapters.

# 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

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

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

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

npx create-tsrouter-app@latest <name> --template file-router --add-ons tanchat

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

# 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. In your Tanstack Start app's app.config.ts file, add the following to configure the output for Netlify:

server: {
    preset: "netlify"
}

In the Netlify Dashboard or using the Netlify CLI, set your build settings to the following:

• build command = vinxi build
• output dir = dist To go to your build settings in the Netlify Dashboard, for your chosen site, go to
  Site configuration > Build & deploy > Continuous deployment > Build settings
  . Your site should successfully deploy on your next push 🚀

Learn more from the official TanStack docs.