CMS-Kit 🔧🔧🔧

This production ready boilerplate accumulating the experience and best practices collected at Focus Reactive. The project serves the idea of making Headless CMS-based development accessible, comfortable, and fast.

Features

• Next.js 15 for performance: Leverage the power of Next.js 15 for performance and SEO-friendly sites
• Real-time editing: Edit content and see changes live, creating dynamic experience
• User-friendly interface: Reduce friction for your team when working with the content
• Advanced content management: Collaborate with your team in real-time using publishing workflows and changes history
• Instant publishing: Make content live instantaneous without delays
• Multi-CMS support: Seamlessly switch between different headless CMS platforms
• Type-safe development: Full TypeScript integration with auto-generated types
• Modern UI components: Pre-built components using Radix UI for consistent design
• Efficient caching: Smart caching strategies for optimal performance
• Theme customization: Flexible theming system using CSS variables
• Automated setup: One-command initialization script that handles CMS platform integration, account linking, and Vercel deployment

Demo 👀

Production website

• Sanity
• Storyblok

Editing experience

• Sanity

Getting Started

Prerequisites

• Make sure your Github account is linked to Vercel account. You can do it here.
• Make sure pnpm package manages is installed.

Sanity

1. Create Github repository, create Sanity project, deploy to Vercel

1. Clone project locally

• Navigate to your Github account and clone project repository locally.
• Navigate to project folder.

1
cd <project folder>

• Install dependencies

1
pnpm install

1. Pull required ENV variables

Execute following command to pull ENV variables from Vercel and replace some of the with local development values

1
pnpm vercel link &&
2
pnpm vercel env pull &&
3
mv .env.local apps/sanity/

1. Import templates and example pages data

1
cd apps/sanity && pnpm import-dataset

1. Run project locally

1
pnpm dev

Storyblok

Sanity CMS Overview

1. Create a new repository using this template by clicking the "Use this template" button at the top of the repository page.

2. Await the initial workflow to be finished

1. Clone your new repository:

   1
   git clone <your-repository-url>

2. Navigate to the project directory:

   1
   cd <repository-name>

3. Install dependencies using pnpm:

   1
   pnpm install

4. Navigate to the Storyblok CLI directory:

   1
   cd apps/storyblok/CLI

5. Run the setup script,

⚠️ command should be executed from apps/storyblok/CLI (previous step), to consume correct environment variables:

1
   node sb.mjs

1. Follow the interactive prompts in the CLI tool to:

   • Enter your Storyblok Personal Access Token
   • Enter your Vercel Personal Auth Token
   • Select your Vercel team
   • Choose a project name
   • Complete the space creation and configuration process

2. Go to project settings in Vercel dashboard

   • select Git section
   • create deploy hook and copy it
   • select Environment variables section
   • add variables called VERCEL_REDEPLOY_HOOK_URL and assign it to created deploy hook value
   • trigger rebuild

This process ensures that global component updates are displayed on all pages.

🏁 Your CMS-based project is ready 🏁

Repo structure

• apps/storyblok: CMS app
• apps/sanity: CMS app
• packages/ui: UI components library, shared between both CMS apps
• packages/eslint-config: shared eslint configurations
• packages/ts-config: shared ts-config configuration
• packages/tailwind-config: shared tailwind configuration

Types of components

• UI component - universal and sharable component between multiple CMSs
• Controller component - takes data from CMS, convert it to UI component format, and use UI component with converted props. Each CMS has it's own controller component for each UI component.
• All controller components have common propertiers to change style, such as margin, background, alignment etc.

Components composition and hierarchy

The website structure follows a clear hierarchical composition:

1. Pages

   • Top-level components that represent entire web pages
   • Each page contains multiple sections, SEO properties and theme

2. Sections

   • Container components that organize content into distinct areas
   • Can be configured with settings like margin, background, width, alignment etc.
   • Hold and arrange other components

3. Base Components

   • Components like link, image, and rich text
   • Combination of multiple functional components like card
   • Can be combined and reused across different sections

RichText component has additional functionality. It allows to add sections inside, which gives ability to combine sections with text.

Add new section

1. Create new component using generators

1
pnpm gen

1. Select type of component to create

1
- UI: Create a new UI component
2
- Storyblok: Create a new content section
3
- Sanity: Create a new content section

1. Enter name of the component
2. For Storyblok, add section component to the CMS
3. Update properties and design
4. Go to CMS folder

1
cd apps/storyblok

or

1
cd apps/sanity

1. Generate types for added section

1
pnpm sb-login
2

3
pnpm gen:types

Update existing section

1. Updata design
2. Update fields
3. Go to CMS folder

1
cd apps/storyblok

or

1
cd apps/sanity

1. Generate types for updated section

1
pnpm gen:types

Start project in dev mode

Instalation

1. Clone repository

   1
   git clone https://github.com/focusreactive/cms-kit

2. Go to project directory

   1
   cd cms-kit

3. Install dependencies

   1
   pnpm install

4. Add and fill .env and .env.local file with proper data:

Create .env and .env.local files in project folder (apps/sanity or apps/storyblok) and add the following variables:

.env

1
REPO_PROD_BRANCH="main"
2
REPO_TYPE="github"
3
REPO_ID="[repo id]"
4
REPO_NAME="[nickname]/[repo name]"

Storyblok project

.env.local

1
NEXT_PUBLIC_DOMAIN="https://localhost:4050"
2
NEXT_PUBLIC_IS_PREVIEW="true"
3
NEXT_PUBLIC_STORYBLOK_TOKEN="[storyblok space preview token]"
4
NEXT_PUBLIC_STORYBLOK_API_GATE="https://api.storyblok.com/v2/cdn"

Sanity project

.env.local

1
NEXT_PUBLIC_BASE_URL="http://localhost:3000"
2
NEXT_PUBLIC_SANITY_PROJECT_ID="[project id]"
3
NEXT_PUBLIC_SANITY_DATASET="production"
4
SANITY_API_READ_TOKEN="[read token]"

1. Run dev server

   1
   pnpm dev

Happy hacking 👾