# TanStack Start - Blueprint (/docs/blueprints/tanstack-start)



A production-ready starter for full-stack React apps on [TanStack Start](https://tanstack.com/start), built with Bun and served as a self-contained Node server. Single repo, no database, no environment variables.

**Tech stack:**

| Layer  | Technology                                                                                       |
| ------ | ------------------------------------------------------------------------------------------------ |
| App    | TanStack Start + [TanStack Router](https://tanstack.com/router) on React 19                      |
| Data   | [TanStack Query](https://tanstack.com/query) with SSR integration                                |
| UI     | [Tailwind CSS v4](https://tailwindcss.com/) + [shadcn/ui](https://ui.shadcn.com/) + lucide icons |
| Server | [Nitro](https://nitro.build/), a self-contained Node server on `node:22-slim`, port 3000         |
| Build  | Bun (multi-stage)                                                                                |

<a href="https://github.com/rock8-cloud/tanstack-start-blueprint" target="_blank" rel="noopener noreferrer">
  View on GitHub →
</a>

***

## What You Get [#what-you-get]

* A private clone of the template in your GitHub account
* One Rock8Cloud service wired to it
* A demo landing page at a public URL once the first deploy finishes

The first build takes about a minute. Deploy it from **Blueprints** in the dashboard, or from an agent over [MCP](/docs/guides/mcp-integration) with `deploy_blueprint` and the `tanstack-start` slug.

The landing page is for **Driftwave**, a fictional product that shows what the stack looks like out of the box. Replace it with your own.

***

## Customizing [#customizing]

* Edit the landing copy in `src/content/landing.ts` and its sections in `src/components/landing/`
* Add a route by adding a file under `src/routes/`. The route tree regenerates on the next build
* Put code that must stay on the server (secrets, database calls) in a server function with `createServerFn`
* Add shadcn components with `bunx --bun shadcn@latest add <component>`
* Push to your default branch and Rock8Cloud rebuilds automatically

***

## Environment Variables [#environment-variables]

The blueprint needs none. When you add your own, read them at request time inside server functions or route handlers (`process.env.MY_VAR`), not at module top level. The image is built without secrets and Rock8Cloud provides the environment at runtime.

`PORT` is set by the platform. Do not set it yourself.

If you later need a database, add one to the same project and link its variables. See [Adding a Database](/docs/adding-a-database).

***

## Related [#related]

* [Elysia + TanStack Dashboard](/docs/blueprints/elysia-tanstack-dashboard) - TanStack Start with an Elysia API, auth, and PostgreSQL
* [Vue](/docs/blueprints/vue) - a static Vue 3 SPA
* [Environment Variables](/docs/guides/environment-variables)
* [Blueprints](/docs/blueprint)