Production tanstack/start

[andreiverse]

Hi! I am building my first project using tanstack start and want to deploy my app on my home server in a docker container.

How do you run a production tanstack start server? The docs say pnpm dev but that's for.... development? I also have a proxy set inside vite to route /api to my backend (because I couldn't set up a middleware inside start). Tried pnpm build and pnpm serve (which runs vite preview) but that gives me a 404 on / so I guess it does not work properly with tanstack start

[Garee]

The Hosting section of the documentation describes how to build and run for a production environment.

[andreiverse]

It doesn't respect the vite proxy and the routeRules config is not forwarding requests properly for some reason (the feature is experimental it seems). Is it possible to write a tanstack/start middleware implementation/route that forwards /api/** to a local API server? I tried before but wasn't successful, I scraped the code and just went with the vite dev proxy

[andreiverse]

Went back at it and wrote this:

// routes/api/$.ts
import { createFileRoute } from '@tanstack/react-router'

const API_TARGET = process.env.VITE_API_TARGET ?? 'http://localhost:8080'

export const Route = createFileRoute('/api/$')({
  server: {
    handlers: ({ createHandlers }) =>
      createHandlers({
        GET: { handler: proxyHandler },
        POST: { handler: proxyHandler },
        PUT: { handler: proxyHandler },
        PATCH: { handler: proxyHandler },
        DELETE: { handler: proxyHandler },
        OPTIONS: { handler: proxyHandler },
      }),
  },
})

async function proxyHandler({ request, params }: { request: Request; params: any }) {
  const { _splat } = params
  const reqUrl = new URL(request.url)

  const targetUrl = `${API_TARGET}/${_splat ?? ''}${reqUrl.search}`
  const headers = new Headers(request.headers)
  headers.delete('host')

  const response = await fetch(targetUrl, {
    method: request.method,
    headers,
    body: ['GET', 'HEAD'].includes(request.method) ? undefined : request.body,
    redirect: 'manual',
  })

  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers,
  })
}

It works fine so far, on nitro too