Is there a way to have Rewrites or Proxy?

[andrewdavid48]

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"} },
    }
  },
})

[luksch42]

Thats only for dev mode @nahtnam

[nahtnam]

Gotcha,

In case anyone else is looking for this, I spent a while trying different libraries but this ended up working the best:

import { createServerFileRoute } from "@tanstack/react-start/server";
import { Hono } from "hono";
import { proxy } from "hono/proxy";
import { handle } from "hono/vercel";

const app = new Hono().basePath("/docs");

app.all("*", (ctx) => {
  const url = ctx.req.url.replace(
    ctx.req.header("Host")!,
    "INSERT_URL_HERE",
  );
  return proxy(url);
});

async function handler({ request }: { request: Request }) {
  return handle(app)(request);
}

export const methods = {
  DELETE: handler,
  GET: handler,
  HEAD: handler,
  PATCH: handler,
  POST: handler,
  PUT: handler,
};

export const ServerRoute = createServerFileRoute("/docs/$").methods(methods);

[JeffersonCarvalh0]

@JeffersonCarvalh0 is the vite config option working for you? Works for me in development but does not work in production (just returns 404)

Unfortunately no, it doesn't work for me in production either. I hadn't tried when I wrote that answer.
I ended up ditching reverse proxy completely and enabling CORS in my backend because of that =/

[devrayat000]

@devrayat000 did you solve it?

No. The developer just created a new framework, created some hype, and then disappeared when they were asked valid questions. There are a small number of threads on this issue, and every time the developers of the framework have ghosted everyone.

[andrewdavid48]

@devrayat000 did you solve it?

No. The developer just created a new framework, created some hype, and then disappeared when they were asked valid questions. There are a small number of threads on this issue, and every time the developers of the framework have ghosted everyone.

I disagree with you that the devs created hype and disappeared. The tanstack community is very active on discord and devs have worked tirelessly on major changes (see devinxi). I encourage you to join the discord community. It's possible your question has already been answered there.

[xuxucode]

How to rewrite /@username to /users/username? username is a dynamic url parameter.

In nextjs, we are using below configuration:

// next.config.ts
const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/@:username/:path*",
        destination: "/users/:username/:path*",
      },
    ]
  },
}

[CanRau]

With the new version currently in alpha you can have a file route called /@{username} and possibly wouldn't need the rewrite for this case anymore #707 (comment)

If you still want to group you could use a pathless layout route

[bayasdev]

This works for me

import {
	createServerFileRoute,
	getRequestIP,
	proxyRequest,
} from "@tanstack/react-start/server";

const BACKEND_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:8000";

export const ServerRoute = createServerFileRoute("/api/$").methods((api) => {
	const handler = api.handler(async ({ request, params }) => {
		const url = new URL(request.url);
		const targetUrl = `${BACKEND_URL}/api/${params._splat ?? ""}${url.search}`;

		const ip = getRequestIP({ xForwardedFor: true });

		await proxyRequest(targetUrl, { headers: { "X-Forwarded-For": ip } });

		return new Response();
	});

	return {
		GET: handler,
		POST: handler,
		PUT: handler,
		PATCH: handler,
		DELETE: handler,
		OPTIONS: handler,
		HEAD: handler,
	};
});

[luixo]

This was removed in v1.132.0, please support it's return: #5359

[sunxyw]

This is what I am doing right now, using the API route. Sharing it in case anyone can get some inspiration.

import { createFileRoute } from "@tanstack/react-router";

const API_HOST = "us.i.posthog.com" as const;
const ASSET_HOST = "us-assets.i.posthog.com" as const;

const posthogProxy = async ({ request }: { request: Request }) => {
  const url = new URL(request.url);
  const hostname = url.pathname.startsWith("/api/ingest/static/")
    ? ASSET_HOST
    : API_HOST;

  const newUrl = new URL(url);
  newUrl.protocol = "https";
  newUrl.hostname = hostname;
  newUrl.port = "443";
  newUrl.pathname = newUrl.pathname.replace(/^\/api\/ingest/, "");

  const headers = new Headers(request.headers);
  headers.set("host", hostname);

  const response = await fetch(newUrl, {
    method: request.method,
    headers,
    body: request.body,
  });

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

export const Route = createFileRoute("/api/ingest/$")({
  server: {
    handlers: {
      ALL: posthogProxy,
      GET: posthogProxy,
      POST: posthogProxy,
      PUT: posthogProxy,
      PATCH: posthogProxy,
      DELETE: posthogProxy,
      OPTIONS: posthogProxy,
      HEAD: posthogProxy,
    },
  },
});