tanstack start

[edwinyjlim]

New example app for Tanstack Start based on React

• create-vite and tanstack router
• client-side + server-side code
• placeholder auth
• proxied calls to PostHog
• PostHog product analytics, identified events, error tracking

[samueldrai]

Hi!
Thanks for this PR, super helpful.
Not quite sure I understand how calls are proxied though. Do you use a server function or an API route for that?
Thanks!

[edwinyjlim]

Hey @samueldrai

To avoid CORS issues or ad blockers blocking calls to PostHog on the client side, we've configured the PostHog client to send its requests to a proxied /ingest API route.

// src/lib/posthog-client.ts
posthog.init(import.meta.env.VITE_POSTHOG_KEY!, {
      api_host: '/ingest', // <-- key config
      ui_host: import.meta.env.VITE_POSTHOG_HOST || 'https://us.posthog.com/',
      ...

Then we have a Vite server that intercepts the /ingest calls that then forwards them to PostHog.

// vite.config.ts
server: {
    proxy: {
      '/ingest': {
        target: 'https://us.i.posthog.com/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/ingest/, ''),
        secure: false,
      },
    },
  },

For production, you'll probably need a managed reverse proxy. Here's a link to the docs on how to set that up!

Also if you have any feedback for this example app or requests for others, let us know!

[daniloc]

Do a pass to eliminate useEffect (preferring event handlers or other approaches) and good to merge