Tanstack Start Sitemaps Autogeneration and Google Analytics setup

Tanstack Start Sitemaps Plugin
- Getting Started
Setting Up Google Analytics
- Step 1: Install react-ga
- Step 2: Configure Google Analytics

Tanstack Start Sitemaps Plugin

Tanstack Start Sitemaps Plugin is designed to work seamlessly with your Vite-powered projects. By reading your route tree file, it extracts all routes and generates a comprehensive sitemap. This not only saves you time but also ensures that your sitemap always reflects the latest routing configuration of your application.

Getting Started

Step 1: Installation

You can quickly install the plugin using pnpm. Open your terminal and run:

pnpm add -D tanstack-start-sitemap

This will add the plugin as a development dependency to your project.

Step 2: Configure the Plugin

To enable the plugin, add it to your Vite configuration in your app.config.ts. Here’s an example configuration:

import { defineConfig } from 'vite';
import { sitemapPlugin } from './plugins/vite-sitemap-plugin';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      sitemapPlugin({
        hostname: 'https://example.com', // Replace with your site's URL
      }),
    ],
  },
});

Step 3: Customize Your Sitemap Options

The plugin offers several options to tailor your sitemap to your needs. Here’s a quick rundown of the available options:

Option	Type	Default	Description
`hostname`	`string`	Required	The base URL of your site (e.g., `https://example.com`).
`routeTreePath`	`string`	`'app/routeTree.gen.ts'`	The path to your route tree file. The plugin will search several possible paths to locate it.
`routes`	`{ [key: string]: { changefreq?: string; priority?: number; lastmod?: string } }`	`{}`	Per-route configuration that allows overriding default settings for specific routes.
`defaultChangefreq`	`'always' \| 'hourly' \| 'daily' \| 'weekly' \| 'monthly' \| 'yearly' \| 'never'`	`'weekly'`	The default change frequency applied to routes that don’t have an override.
`defaultPriority`	`number`	`0.5`	The default priority applied to routes that don’t have an override.

For example, to set specific configurations for a route, adjust the routes option accordingly:

sitemapPlugin({
  hostname: 'https://example.com',
  routes: {
    '/about': { changefreq: 'monthly', priority: 0.8 },
    '/contact': { changefreq: 'yearly', priority: 0.3, lastmod: '2025-01-01' }
  }
})

Troubleshooting

Route Tree File Not Found:
Double-check the routeTreePath setting in your configuration. Ensure the file exists in one of the expected locations. This file should be auto generated by Tanstack start when you run
Terminal window
```
pnpm run build
```
Configuration Errors:
Verify that all required options are set correctly, especially the hostname, which is essential for generating a valid sitemap.

Setting Up Google Analytics

Integrating Google Analytics into your project is essential for tracking visitor interactions and understanding user behavior. The following steps show you how to set up Google Analytics using the react-ga library.

Step 1: Install react-ga

If you haven’t already installed the react-ga library, add it to your project with your package manager:

pnpm add react-ga

Step 2: Configure Google Analytics

In your main application file or a dedicated analytics setup file, import and initialize Google Analytics. Replace the tracking ID with your own:

import ReactGA from "react-ga"; // Added to support Google Analytics

// Initialize Google Analytics with your tracking ID
ReactGA.initialize("G-XXX"); // Replace with your actual tracking ID

// Record a pageview for the initial page load
ReactGA.pageview(window.location.pathname + window.location.search);

Happy coding!!

Table of Contents