Skip to content
Esc
navigateopen⌘Jpreview

Astro

Pass the Vite plugin through vite.plugins and prerender collection entries with getStaticPaths.

Astro builds on Vite, so the plugin works unchanged: passed through vite.plugins, 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 @astrojs/node
pnpm add @stetcms/vite @stetcms/client @astrojs/node
yarn add @stetcms/vite @stetcms/client @astrojs/node
bun add @stetcms/vite @stetcms/client @astrojs/node

The adapter earns its place in step 2.

Add the plugin

import node from '@astrojs/node';
import { stet } from '@stetcms/vite';
import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  vite: {
    plugins: [stet()],
  },
});

Read content in frontmatter

Frontmatter runs on the server, so the API key never reaches the browser:

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

const posts = await stet.posts.list();
---

<ul>
  {posts.map((post) => <li>{post.title}</li>)}
</ul>

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.

Prerender content routes

Set fixed pages to prerender and return every collection slug from getStaticPaths:

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

export const prerender = true;

export async function getStaticPaths() {
  if (process.env.STET_API_KEY === undefined || process.env.STET_API_KEY === '') {
    return [];
  }
  const posts = await stet.posts.list();
  return posts.map((post) => ({ params: { slug: post.slug }, props: { post } }));
}

const { post } = Astro.props;
---

<h1>{post.title}</h1>

Astro now writes one HTML page per post during astro build. If Stet is unavailable while a key is configured, the build fails.

The Astro example is this guide as a running app, wired to a seeded local Stet.

Was this page helpful?