How can I specify vite server options when using @tanstack/react-start/config

[rhyek]

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 } from '@tanstack/react-start/config';
...

export default defineConfig({
  vite: {
    ...
    server: {
      hmr: {
        clientPort: 443,
        port: Number(process.env.HMR_PORT!),
      },
      allowedHosts: [process.env.APP_DOMAIN!],
    },
  },
});

I noticed vinxi supports these options now, but not sure if they're relevant: nksaraf/vinxi#465

[aclovestech]

I had the same problem. Trying the following code worked for me:

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import type { InlineConfig } from 'vite'

const vite: InlineConfig = {
  server: {
    allowedHosts: ['your host here'],
  },
  plugins: [
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
  ],
}

const config = defineConfig({
  tsr: {
    appDirectory: 'src',
  },
  vite,
})

export default config

I hope this helps!

[humemm]

/**
 * 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, which made it
 * difficult to configure reverse proxy rules.
 *
 * Starting with v0.5.6, you can explicitly assign fixed HMR ports in the config.
 *
 * ⚠️ Do *not* configure both HMR ports in `viteMain`—Vinxi will try to assign the
 * same port to both and throw an error.
 *
 * With fixed ports, you can write stable reverse proxy rules, such as:
 *   - https://example.dev/_build/client/hmr → http://localhost:4224
 *   - https://example.dev/_build/server/hmr → http://localhost:4334
 *
 * 💡 Tip: Setting `host: '0.0.0.0'` in the Vite config may still default to
 * `localhost` in Vinxi. To ensure the dev server listens on all interfaces,
 * pass `--host 0.0.0.0` in your dev script.
 *
 * Example `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,
  ...
});