TanStack Start

Add the Vite plugin, read content through server functions, and prerender linked content pages.

TanStack Start builds with Vite, so the plugin does all the codegen: it writes src/stet.gen.ts before every build and dev-server start, and keeps watching while the dev server runs, so a field added in the Stet UI reaches your types a few seconds later.

You need an organization API key in STET_API_KEY; the quickstart covers creating one.

Install

npm install @stetcms/vite @stetcms/client

pnpm add @stetcms/vite @stetcms/client

yarn add @stetcms/vite @stetcms/client

bun add @stetcms/vite @stetcms/client

Add the plugin

import { stet } from '@stetcms/vite';
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
import viteReact from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

const hasStetApiKey = process.env.STET_API_KEY !== undefined && process.env.STET_API_KEY !== '';

export default defineConfig({
  plugins: [
    stet(),
    tanstackStart({
      prerender: { enabled: hasStetApiKey, crawlLinks: true },
    }),
    viteReact(),
  ],
});

Read content through server functions

Server functions run on the server, so the API key never reaches the browser:

import { createServerFn } from '@tanstack/react-start';

import { stet } from './stet.gen';

export const fetchPosts = createServerFn({ method: 'GET' }).handler(() => stet.posts.list());

import { createFileRoute } from '@tanstack/react-router';

import { fetchPosts } from '../content';

export const Route = createFileRoute('/blog/')({
  loader: () => fetchPosts(),
  component: Blog,
});

Commit src/stet.gen.ts: it contains no secrets, and the project type-checks without a key or a reachable Stet, because the plugin never fails a build over either.

With STET_API_KEY set, TanStack Start fetches /, follows internal links, and writes each discovered page into the client build. A configured content request that fails also fails the build, preventing a partial deployment.

The TanStack Start example is this guide as a running app, with the analytics route on top.