> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/TanStack/router/llms.txt
> Use this file to discover all available pages before exploring further.

# ESBuild Plugin API

# ESBuild Plugin

ESBuild plugin for TanStack Router with route generation.

## Installation

```bash theme={null}
npm install @tanstack/router-plugin
```

## Basic Usage

```js theme={null}
// build.js
import { build } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

await build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [
    TanStackRouterEsbuild()
  ]
})
```

## Configuration Options

Same options as the Vite plugin:

<ParamField path="routesDirectory" type="string">
  Directory containing route files.

  **Default:** `'./src/routes'`
</ParamField>

<ParamField path="generatedRouteTree" type="string">
  Output path for generated route tree.

  **Default:** `'./src/routeTree.gen.ts'`
</ParamField>

<ParamField path="routeFileIgnorePrefix" type="string">
  Prefix to ignore when generating routes.

  **Default:** `'-'`
</ParamField>

<ParamField path="autoCodeSplitting" type="boolean">
  Enable automatic code splitting.

  **Default:** `false`
</ParamField>

## Examples

### Basic Setup

```js theme={null}
import { build } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

await build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  plugins: [
    TanStackRouterEsbuild()
  ]
})
```

### With Code Splitting

```js theme={null}
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

await build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  splitting: true,
  plugins: [
    TanStackRouterEsbuild({
      autoCodeSplitting: true,
      codeSplittingOptions: {
        defaultBehavior: [
          ['component'],
          ['loader']
        ]
      }
    })
  ]
})
```

### Watch Mode

```js theme={null}
import { context } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

const ctx = await context({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    TanStackRouterEsbuild()
  ]
})

await ctx.watch()
console.log('Watching for changes...')
```

### Development Server

```js theme={null}
import { context } from 'esbuild'
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

const ctx = await context({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    TanStackRouterEsbuild()
  ]
})

const { host, port } = await ctx.serve({
  servedir: 'dist'
})

console.log(`Server running at http://${host}:${port}`)
```