Using Remix API routes as a reverse proxy

Last updated:

|Edit this page|
Warning

  1. The following self-hosted proxy isn't provided by PostHog, so we can't take responsibility for it! If unsure, we recommend using our managed reverse proxy.

  2. If you are using the EU cloud then use eu instead of us in all domains (e.g. us.i.posthog.com -> eu.i.posthog.com).

If you are using Remix, you can use API routes to set up a reverse proxy.

Create a file <ph_proxy_path>.$.tsx in the routes folder. For example, if your proxy path is /ph-relay-xyz123, name the file ph-relay-xyz123.$.tsx.

In this file, set up code to match requests to a custom route, set a new host header, change the URL to point to PostHog, and rewrite the response.

JavaScript
import type { ActionFunction, LoaderFunction } from "@remix-run/node";


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


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


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


  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 loader: LoaderFunction = async ({ request }) =>
  posthogProxy(request);


export const action: ActionFunction = async ({ request }) =>
  posthogProxy(request);

Once done, configure the PostHog client to send requests via your rewrite.

JavaScript
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
  api_host: "/<ph_proxy_path>",
  ui_host: "<ph_app_host>"
})

Questions? Ask Max AI.

It's easier than reading through 638 pages of documentation

Community questions

Was this page useful?

Next article

Using SvelteKit server hooks as a reverse proxy

For SvelteKit, you can use server hooks to proxy requests to PostHog. We've tested this (and it works) with Cloudflare Workers. To do this, create a file named hooks.server.ts in your src directory (or the dir you configured to contain source files). In this file, set up code to match requests to a custom route, set a new host header, change the URL to point to PostHog, and rewrite the response. Note: This only works in SSR mode. If your site is statically generated, SvelteKit…

Read next article