TanStack Start Sitemap Autogeneration and Analytics Setup

Generating a Sitemap from the Route Tree
Setting Up Analytics

Generating a Sitemap from the Route Tree

A sitemap plugin that reads your generated route tree can produce sitemap.xml automatically, so you are not hand-maintaining a list of URLs that drifts from your actual routes.

Step 1: Installation

1
pnpm add -D tanstack-start-sitemap

Check the package’s own README for the version compatible with your TanStack Start version before installing; sitemap plugins in this ecosystem move fast and can lag behind Start’s config format.

Step 2: Configure the Plugin

Add the plugin to your Vite config:

1
import { defineConfig } from "vite";
2
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
3
import { sitemapPlugin } from "./plugins/vite-sitemap-plugin";
4
import tsConfigPaths from "vite-tsconfig-paths";
5

6
export default defineConfig({
7
  plugins: [
8
    tsConfigPaths({
9
      projects: ["./tsconfig.json"],
10
    }),
11
    tanstackStart(),
12
    sitemapPlugin({
13
      hostname: "https://example.com", // Replace with your site's URL
14
    }),
15
  ],
16
});

Step 3: Customize Sitemap Options

Option	Type	Default	Description
`hostname`	`string`	Required	The base URL of your site (e.g. `https://example.com`).
`routeTreePath`	`string`	`'src/routeTree.gen.ts'`	Path to your generated route tree. The plugin checks several common locations.
`routes`	`{ [key: string]: { changefreq?: string; priority?: number; lastmod?: string } }`	`{}`	Per-route overrides.
`defaultChangefreq`	`'always' \| 'hourly' \| 'daily' \| 'weekly' \| 'monthly' \| 'yearly' \| 'never'`	`'weekly'`	Applied when a route has no override.
`defaultPriority`	`number`	`0.5`	Applied when a route has no override.

Example override for specific routes:

1
sitemapPlugin({
2
  hostname: "https://example.com",
3
  routes: {
4
    "/about": { changefreq: "monthly", priority: 0.8 },
5
    "/contact": { changefreq: "yearly", priority: 0.3, lastmod: "2026-01-01" },
6
  },
7
});

Troubleshooting

Route tree file not found: check routeTreePath against where TanStack Start actually writes routeTree.gen.ts in your project. Run pnpm run build once first; the file is generated during the build, not checked into git.
Empty or stale sitemap: the plugin reads the route tree file from disk, so if you’re running it against a cached build output, delete .output and .vinxi (or .vite cache directories) and rebuild.

Setting Up Analytics

react-ga is unmaintained and wraps the old Universal Analytics API, which Google shut down in 2024. For GA4, use the official gtag script directly, loaded through Astro’s <script> tag or a partytown-forwarded call so it does not block the main thread.

1
<!-- In your root layout, loaded once -->
2
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
3
<script>
4
  window.dataLayer = window.dataLayer || [];
5
  function gtag() { dataLayer.push(arguments); }
6
  gtag("js", new Date());
7
  gtag("config", "G-XXXXXXX");
8
</script>

If you’d rather not send full clickstream data to Google, a privacy-first alternative such as Plausible or Umami gives you pageviews and referrers without a cookie banner, and both ship a script under 1kb.

Debugging this in production

A sitemap that silently omits new routes, or an analytics snippet that never fires, both fail quietly: no error in the console, just missing data days later when you check search console or your dashboard. A session replay and error tracker such as Sentry or LogRocket catches build-time regressions and client script failures before they cost you a week of missing traffic data, and both have a free tier that covers a side project.

If you are taking this into production, the next steps below cover auth, data and observability, and the newsletter is where the Astro SaaS boilerplate ships first.