Add a blog to a React (Vite) app

Before you start

• A React app built with Vite
• A project API key from Developer → API keys, with your site's address added under Allowed origins in Project settings

Install and connect

npm install cmskite

VITE_CMSKITE_KEY=csk_live_...

import { useEffect, useState } from 'react'
import { createCMSKite } from 'cmskite/browser'

const cms = createCMSKite({ apiKey: import.meta.env.VITE_CMSKITE_KEY })

export function Blog() {
  const [posts, setPosts] = useState([])
  useEffect(() => {
    cms.posts.list({ limit: 20 }).then((page) => setPosts(page.items))
  }, [])
  return posts.map((post) => <a key={post.id} href={`/blog/${post.slug}`}>{post.title}</a>)
}

Search engines and a single-page app

A single-page app sends an empty page and fills it in the browser. Google renders JavaScript, slowly; many other crawlers and AI tools do not. If search traffic matters, either move the blog to a framework that renders on the server (Next.js, Astro), or link to your free blog link, which is fully rendered.

Check that it works

1. Publish a short test post in the dashboard
2. Open /blog on your deployed app in a private window and reload. The post should be in the list within a minute
3. Open the post. Its address should be your site's, not cmskite.com
4. Delete or unpublish the test post when you are done