Is there a way to have Rewrites or Proxy?

[andrewmurraydavid]

This might be a dumb question, but I couldn't find any docs for it, so I might as well ask.

My team is moving away from nextjs (pages) and moving to TSR (tanstack router with start/vinxi).
One of the difficulties we're seeing is that we couldn't find any docs on rewrites/proxies.

The reason this is a blocker for us is that we need to have the API set cookies from the same domain as the UI (due to multiple envs, legacy auth issue and others).

FWIW, i tried the vite server proxy, but it seems that tanstack router intercepts the request before vite proxy can (assumption).

In our nextjs.config.ts we have the following:

// nextjs.config.ts
{
  rewrites() {
    return [
      { source: "/api/avatar/:path*", destination: `${API_URL}/members/:path*/avatar` },
      { source: "/api/:path*", destination: `${API_URL}/:path*` },
    ];
  },
}

We played around a bit and have a very hacky solution which is very obnoxious. We do send headers and other through, but not in this example.
Hopefully there's a better way that this:

// routes/api/$.ts
// ...

function constructUrl(splat: any) {
  return `${getApiBaseUrl()}/${
    Array.isArray(splat) ? splat.join("/") : typeof splat === "object" ? Object.values(splat).join("/") : splat
  }`;
}

const createResponse = (data: any, headers: Headers, status: number) => 
      new Response(JSON.stringify(data), { headers, status });

export const Route = createAPIFileRoute("/api/$")({
  GET: async ({ params }) => {
    const { _splat } = params;
    const url = constructUrl(_splat);
    const res = await api.get(url);

    return createResponse(res.data, res.headers, res.status);
  },
  POST: async ({ params, request }) => {
    const { _splat } = params;
    const body = await request.json();
    const url = constructUrl(_splat);
    const res = await api.post(url, body);

    return createResponse(res.data, res.headers, res.status);
  },
});

[schiller-manuel]

as of v1.58.7, we have the following:

TanStack Start now exposes the routeRules config option from nitro: https://nitro.unjs.io/guide/routing#route-rules

example:

import { defineConfig } from '@tanstack/start/config'

export default defineConfig({
  server: {
    routeRules: {
      "/proxy/example": { proxy: { to: "https://example.com"} },
    }
  },
})

[andrewmurraydavid]

Thank you!

[rijk]

Hey @schiller-manuel , I tested and this doesn't seem to support rewriting parameters. Example:

export default defineConfig({
  server: {
    routeRules: {
      '/test/**': { redirect: { to: '/**', statusCode: 302 } },
    },
  },
})

GET localhost:3004/test/foo/bar

Expected: localhost:3004/foo/bar
Actual: localhost:3004/**

[schiller-manuel]

@rijk seems to be a different use case. can you please create a new issue/discussion for what you want to do?

[rijk]

Twofold:

1. Proxy internally from /[slug]/[id] to /[id] ([slug] changes when renaming the item and is not used for querying) — I guess this can also be solved by ignoring the $slug parameter
2. Proxy externally as a reverse proxy; /analytics/** → https://eu.posthog.com/**

[ssijak]

@rijk dont use analytics in the url, blockers could block the request, use some random word that has nothing to do with analytics