TanStack Start

Add to your project

Paste this entry into the components list in diploi.yaml to add TanStack Start to your project.

components:
  - name: TanStack Start
    identifier: tanstack-start
    package: https://github.com/diploi/component-tanstack-start#main

If the folder of the component in your repository is not named tanstack-start, add a folder parameter with the name of the folder.
Import the environment variables of add-ons, such as a database, into the component with env.include in diploi.yaml:

components:
  - name: TanStack Start
    identifier: tanstack-start
    package: https://github.com/diploi/component-tanstack-start#main
    env:
      include:
        - postgres.*

TanStack Start reference

Readme

Launch a trial, no account needed https://diploi.com/component/tanstack-start

This template provides a minimal setup to get TanStack Start working in Diploi.

Uses the official node Docker image.

Server-side rendering is handled by Nitro, preconfigured through the TanStack Start Vite plugin.

Operation

Getting started

In the Dashboard, click Create Project +
Under Pick Components, choose TanStack Start

You can add other frameworks from this page if you want to build a monorepo application, eg, TanStack Start for the frontend and Hono for the backend.
In Pick Add-ons, select any databases or extra tools you need.
Choose Create Repository so Diploi generates a new GitHub repo for your project.
Click Launch Stack

Package managers

Supports Bun, Yarn, npm, and pnpm. The package manager is auto-detected from your lockfile (bun.lock, yarn.lock, package-lock.json, or pnpm-lock.yaml). The install and build steps always use the detected package manager.

Development

When the component is first initialized, dependencies are installed using the detected package manager. The development server is then started with:

npm run dev -- --host

This can be changed with the containerCommands.developmentStart field in diploi.yaml.

Production

Builds a production ready image. Image runs npm install & npm run build when being created, using the detected package manager. Once the image runs, npm start is called, which serves the Nitro build from .output/.

This can be changed with the containerCommands.productionStart field in diploi.yaml.

ENV

Since Vite replaces environment variables during the build step, the client side code cannot directly access dynamic ENVs in production. You have a few ways to get around this limitation:

For values that are not deployment-dependent, define them in diploi.yaml using the static import syntax. The values are exposed to the Dockerfile as ARG variables.
For values that depend on a specific deployment (such as variables imported from other components in diploi.yaml, or configured in the Environment tab), use the recommended way to use runtime ENVs in production for TanStack Start.

Ports

The component serves on port 5173 in both development and production. If you change it, update all of these so they stay in sync:

hosts[].port in diploi.yaml
EXPOSE and ENV PORT in Dockerfile and Dockerfile.dev
server.port in vite.config.ts — Vite does not read PORT from the environment on its own