T
TanStack•5mo ago
protestant-coral

Running a reverse proxy for the dev server, I need to configure HMR options which are not available

Hi, all. I know this will surely be fixed once vinxi is removed from the project and we can configure vite directly, but was wondering if there might be a workaround someone is aware of. My issue is I need to point my reverse proxy to specific ports of the dev server including the HMR port and client port. I had this working perfectly when using Remix+vite, but hit this roadblock when migrating to tanstack/start. This is what I want to achieve: 
export default defineConfig({
  vite: {
    ...
    server: {
      ...
      hmr: {
        clientPort: 443,
        port: Number(process.env.HMR_PORT!),
      },
    },
  },
});
export default defineConfig({
  vite: {
    ...
    server: {
      ...
      hmr: {
        clientPort: 443,
        port: Number(process.env.HMR_PORT!),
      },
    },
  },
});
I had opened a discussion for it: https://github.com/TanStack/router/discussions/4023
GitHub
How can I specify vite server options when using @tanstack/react-st...
I'm running my tanstack start app behind a local reverse proxy for development and need to provide the following options which I had been using successfully using Remix: import { defineConfig }...
12 Replies
metropolitan-bronze
metropolitan-bronze•5mo ago
this will soon be possible when we have migrated off vinxi
multiple-amethyst
multiple-amethyst•5mo ago
hmm - this should be possible - https://github.com/nksaraf/vinxi/pull/465 was merged
GitHub
feat: allow custom HMR configuration on a per router basis by marbe...
fixes #394 adapted from #404 to operate on a per router basis
protestant-coral
protestant-coralOP•5mo ago
@marbemac yeah saw that before. it would require a change on tanstack/start/config still, right? if you're familiar with it, could you point me in the right direction so i can maybe just do a pnpm patch?
multiple-amethyst
multiple-amethyst•5mo ago
I haven't used it in a little while - but this worked for me back when I was working on that fix: 
import { defineConfig } from "@tanstack/start/config";

export default defineConfig({
  routers: {
    client: {
      vite: {
        server: {
          hmr: {
            port: 60101,
            clientPort: 60100,
          },
        },
      },
    },
  },  
});
import { defineConfig } from "@tanstack/start/config";

export default defineConfig({
  routers: {
    client: {
      vite: {
        server: {
          hmr: {
            port: 60101,
            clientPort: 60100,
          },
        },
      },
    },
  },  
});
protestant-coral
protestant-coralOP•5mo ago
that worked perfectly, @marbemac . much thanks!
other-emerald
other-emerald•5mo ago
They need to bump the vinxi version in react-start-config to 0.5.4 from 0.5.3, but they will probably won't do it as they are moving away from vinxi. This gives me this error: Firefox can’t establish a connection to the server at ws://localhost:60100/_build/?token=uQVJkB_ZK6Xp. client:802:30 [vite] failed to connect to websocket (Error: WebSocket closed without opened.).
multiple-amethyst
multiple-amethyst•5mo ago
try pinning vinxi to 0.5.4 in your package.json resolutions
foreign-sapphire
foreign-sapphire•5mo ago
/**
 * Vinxi launches two separate HMR (Hot Module Replacement) servers—one for the client router and one for the server router.
 * Prior to version 0.5.6, these HMR ports were assigned randomly, making it challenging to set up reverse proxy rules.
 * As of Vinxi 0.5.6, you can explicitly define fixed HMR ports in your configuration.
 * This allows you to create stable reverse proxy rules, such as:
 *   - https://example.dev/_build/client/hmr → localhost:4224
 *   - https://example.dev/_build/server/hmr → localhost:4334
 *
 * Note: Although you can set `host: '0.0.0.0'` in the Vite config, Vinxi may still default to `localhost`.
 * To ensure the dev server listens on all network interfaces, pass `--host 0.0.0.0` in your dev script.
 * For example, in your `package.json`:
 *   "scripts": {
 *     "dev": "vinxi dev --host 0.0.0.0"
 *   }
 */
import { defineConfig } from '@tanstack/react-start/config';
import type { InlineConfig } from 'vite';

const viteMain: InlineConfig = {
  server: {
    allowedHosts: ['example.dev']
  },
  ...
};

const viteClientHMR: InlineConfig = {
  server: {
    allowedHosts: ['example.dev'],
    host: '0.0.0.0',
    hmr: {
      port: 4224,
      protocol: 'wss',
      host: 'example.dev',
      path: '/client/hmr',
      clientPort: 443
    }
  }
};

const viteServerHMR: InlineConfig = {
  server: {
    allowedHosts: ['example.dev'],
    host: '0.0.0.0',
    hmr: {
      port: 4334,
      protocol: 'wss',
      host: 'example.dev',
      path: '/server/hmr',
      clientPort: 443
    }
  }
};

export default defineConfig({
  routers: {
    client: {
      vite: viteClientHMR
    },
    server: {
      vite: viteServerHMR
    }
  },
  vite: viteMain,
  ...
});
/**
 * Vinxi launches two separate HMR (Hot Module Replacement) servers—one for the client router and one for the server router.
 * Prior to version 0.5.6, these HMR ports were assigned randomly, making it challenging to set up reverse proxy rules.
 * As of Vinxi 0.5.6, you can explicitly define fixed HMR ports in your configuration.
 * This allows you to create stable reverse proxy rules, such as:
 *   - https://example.dev/_build/client/hmr → localhost:4224
 *   - https://example.dev/_build/server/hmr → localhost:4334
 *
 * Note: Although you can set `host: '0.0.0.0'` in the Vite config, Vinxi may still default to `localhost`.
 * To ensure the dev server listens on all network interfaces, pass `--host 0.0.0.0` in your dev script.
 * For example, in your `package.json`:
 *   "scripts": {
 *     "dev": "vinxi dev --host 0.0.0.0"
 *   }
 */
import { defineConfig } from '@tanstack/react-start/config';
import type { InlineConfig } from 'vite';

const viteMain: InlineConfig = {
  server: {
    allowedHosts: ['example.dev']
  },
  ...
};

const viteClientHMR: InlineConfig = {
  server: {
    allowedHosts: ['example.dev'],
    host: '0.0.0.0',
    hmr: {
      port: 4224,
      protocol: 'wss',
      host: 'example.dev',
      path: '/client/hmr',
      clientPort: 443
    }
  }
};

const viteServerHMR: InlineConfig = {
  server: {
    allowedHosts: ['example.dev'],
    host: '0.0.0.0',
    hmr: {
      port: 4334,
      protocol: 'wss',
      host: 'example.dev',
      path: '/server/hmr',
      clientPort: 443
    }
  }
};

export default defineConfig({
  routers: {
    client: {
      vite: viteClientHMR
    },
    server: {
      vite: viteServerHMR
    }
  },
  vite: viteMain,
  ...
});
conscious-sapphire
conscious-sapphire•4mo ago
is this possible as of today? i see all of the vite.server options are omitted from start config
cloudy-cyan
cloudy-cyan•4mo ago
also seeing this has been removed. trying to track down where it went and when
environmental-rose
environmental-rose•4mo ago
Why are theserver option omitted ;)) So now, how do i set allowedHosts?
cloudy-cyan
cloudy-cyan•4mo ago
the key is the InlineConfig type. even though defineConfig doesn't appear to have the types for it, it will accept it and work if you annotate the type and set the server.allowedHosts @k @Ibnu Rasikh - creatypestudio.co i also had to explicitly set the host --host 0.0.0.0. basically all we needed was in the example above, but i understand the confusion

Did you find this page helpful?