CMS

Overview

How the CMS is configured in kreogen.

kreogen has a dedicated CMS package that can be used to generate type-safe data collections from your content. This approach provides a structured way to manage your content while maintaining full type safety throughout your application. By default, kreogen uses BaseHub as the CMS.

BaseHub is an optional integration, and the whole package surface degrades without it: with no BASEHUB_TOKEN the queries return empty arrays or null, and the components render nothing. That is worth stating as one property rather than two, because it used to be true of only half of it — the queries degraded and Feed threw, which is exactly how /legal/* shipped a 500 in a project generated with cms and no token.

Setup

Here's how to quickly get started with your new CMS.

1. Create a repository with the expected schema

There is no kreogen-branded BaseHub template to fork. The queries in packages/cms/index.ts expect two collections, and any repository providing them will work:

CollectionUsed for
PostsItemThe blog
LegalPagesItemTerms, privacy and other legal pages

The exact fields each query selects are the fragmentOn calls at the top of that file — _slug, _title, date, image, authors, categories and the body. Generated types live in packages/cms/basehub-types.d.ts and are committed, so a schema mismatch shows up as a typecheck failure rather than as an empty page at runtime.

Once the repository exists, get your Read Token from the "Connect to your App" page:

https://basehub.com/<team-slug>/<repo-slug>/dev/main/dev:connect

The token will look something like this:

bshb_pk_<password>

Keep this connection string handy, you will need it in the next step.

2. Update your environment variables

Update your environment variables to use the new BaseHub token. For example:

BASEHUB_TOKEN="<token>"

3. Start the dev server

When you run bun dev, the CMS package will generate the type-safe BaseHub SDK, and watch changes to your CMS's schema.

You might need to run Restart TS Server in your IDE for TypeScript to pick up the new types.

Querying Basics

The structure of the CMS should look something like this:

- Blog
  - Posts
  - Authors
  - Categories
- Legal Pages

So in order to get all posts, you'd write a query like this:

{
  blog: {
    posts: {
      items: {
        _title: true,
        _slug: true,
        authors: { _title: true }, // references the authors collection
        // ...
      },
    },
  },
}

Starter queries are provided for you in the cms package, within the blog and legal objects. You can read more about the BaseHub SDK in their docs.

Revalidation

A key part of any good CMS integration is the ability to revalidate content when it changes. To do that, BaseHub comes with automatic on-demand revalidation.