I would like to update the port that my app is running on but the TanStack Start [defineConfig][1] method doesn't seem to expose that like a normal Vite config does. Here is my app.config.ts:

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  tsr: {
    appDirectory: "src",
  },
  server: {
    preset: "vercel",
  },
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
    build: {
      rollupOptions: {
        external: ["./storage/**"], // Mark all subdirectories under storage as external
      },
    },
  },
});

Currently it always runs on port 3000. How do I set this up?

I would like to update the port that my app is running on but the TanStack Start [defineConfig][1] method doesn't seem to expose that like a normal Vite config does. Here is my app.config.ts:

import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  tsr: {
    appDirectory: "src",
  },
  server: {
    preset: "vercel",
  },
  vite: {
    plugins: [
      tailwindcss(),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
    ],
    build: {
      rollupOptions: {
        external: ["./storage/**"], // Mark all subdirectories under storage as external
      },
    },
  },
});

Currently it always runs on port 3000. How do I set this up?

• tanstack
• tanstack-start

1 Answer 1

Since the current version of TanStack Start uses Vinxi under the hood, you can update your package.json scripts to pass in the port like this:

"scripts": {
    "dev": "vinxi dev --port 3008",
    "build": "vinxi build",
    "start": "vinxi start"
},

Or just the CLI command:

vinxi dev --port 3008