Hosting TanStack Start Applications on Coolify: A Comprehensive Technical Guide

TanStack Start combines server-side rendering (SSR), streaming data capabilities, and API route management into a modern React framework powered by Vite and TanStack Router. This guide details the process of deploying a TanStack Start application to Coolify, an open-source platform offering Heroku-like deployment simplicity with self-hosted flexibility.

Project Initialization and Configuration

The foundation begins with scaffolded project creation using TanStack Start’s CLI:

pnpm dlx create-tsrouter-app@latest coolify-example --template file-router --tailwind --add-ons start  

or

npx create-tsrouter-app@latest coolify-example  --template file-router --tailwind --add-ons start  

This command generates a project with:

1. File-based routing via TanStack Router
2. Tailwind CSS integration for utility-first styling
3. TanStack Start core framework for SSR and streaming

Post-installation, navigate to the project directory (cd coolify-example) and initialize version control. The critical architectural consideration lies in TanStack Start’s dual rendering capabilities - while supporting static site generation (SSG), its primary strength emerges in SSR-enabled dynamic applications requiring real-time data streaming.

Version Control Preparation

For Coolify integration, GitHub repository setup follows standard patterns:

git init  
git add .  
git commit -m "Initial commit: TanStack Start base"  
git remote add origin https://github.com/<username>/coolify-example.git  
git push -u origin main  

Coolify Deployment Configuration

Application Creation Workflow

1. Platform Selection: In Coolify dashboard, create New Ressource
2. Repository Linking: Connect GitHub/Bitbucket/GitLab account or choose Public Repo
3. Check Repository
4. Build Configuration: (Default as Coolify suggests)
   • Build Pack: nixpacks (supports pnpm natively)
   • Base Directory: / (unless monorepo)

Critical SSR-specific settings:

is_static: false # Disable static site optimization  
port: 3000 # TanStack Start default 

Deploy

Click on Continue, fill out the config for the Project and hit deploy.

DONE!

Conclusion

The TanStack Start-Coolify stack delivers a robust foundation for modern web applications requiring:

• Full-stack capabilities with SSR/SSG flexibility
• Cost-efficient scaling through Coolify’s self-hosted model
• Architectural control without vendor lock-in

This combination provides developers with granular infrastructure control while maintaining deployment ergonomics comparable to managed platforms. As both TanStack and Coolify continue evolving, their integration represents a compelling solution for teams prioritizing performance transparency and technical flexibility.

The repo can be found here:

https://github.com/mwolf1989/coolify-example