cms-kit-sanity

CMS-KIT-SANITY

An endeavor 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.

What is CMS-KIT?

CMS is the collection of ideas and their tech implementations to change how we develop modern marketing and eCommerce websites. What it includes:

Boilerplate. Contains all necessary customizations and integrations for seamless interaction with Headless CMS.
Auto Deployment. Automatically set up accounts in Headless CMS and hosting on Vercel. Connect everything to each other, and to the repository on GitHub. Set environment variables, connect webhooks, and upload initial demo content.
CMS Setup. This contains the necessary plugins and settings for CMS. It generates a content model based on available components. It deeply integrates the Components Set with CMS for the best editorial experience.
Starter components kit. Adds a starter components kit (one or more) with everything you need for integration with CMS and further development of your project.
Project Structure and development guidelines. The project is aimed at long-term development and provides everything necessary for scaling and adding new features. It does not restrict developers in their intentions but gently encourages developers on how to develop and model new components quickly

For who?

Developers. Can quickly start the project in minutes and go fast in component development.
Content Editors. Intuitive navigation and visual preview of what they’re creating.
Project managers. Can test the system without developers (see one-click rollout).
Teams. Develop content and new features in parallel. Fast time to market.

What is inside?

Meet our first implementation of the CMS-KIT: CMS-KIT-SANITY - the powerful mix of the most flexible CMS and top-notch frontend boilerplate.

NextJS with app router. The best option for static and dynamic content rendering. Highly optimized for SEO and Performance.
Live preview, Visual Editing, and Template rendering.
Tailwind-based Starter Components set. Later, we will add more Pluggable Components Sets based on other CSS Frameworks.
Auto rollout for Vercel and Sanity accounts.
Templates selector plugin for Sanity Studio.
Initial content example.
Typescript

Get started

Create an own repo from this template
Wait 30 seconds while the initial action is processed and the update is committed to your repo. As a result you will have a .env.initial file with your personal settings
After that feel free to continue working locally (see the next section)

Local development

git clone your repo

use pnpm i or npm i --legacy-peer-deps to install dependencies

Do pnpm run rollout - this tool will pass you through some simple steps where you create or login to required accounts and fill .env with required variables. Then this tool will automatically setup and connect Vercel, Sanity and Github repo so as a result you will have a properly set up system including Headless CMS, Modern Hosting and Github repository.

pnpm run dev to run local dev server

open http://localhost:3000/ to preview pages

open http://localhost:3000/admin to enter Sanity Studio

Credits

This project was created at FocusReactive, the expert consultancy for the modern web. We specialize in helping clients beat the competition and accelerate business growth. With deep expertise in headless CMS, NextJS, and eCommerce, we deliver cutting-edge solutions that prioritize your business goals.

Our Expertise

Content-Centric Websites: We have deep experience in building extendable, SEO-optimized content and marketing websites with advanced CMS integrations and analytics.
Headless eCommerce: Our next-generation, content-rich, and performant online eCommerce websites come with end-to-end integrations to power your digital business.
Headless CMS Consulting: We offer multi-channel CMS development, modeling, customization, and support to help you manage your content seamlessly across various platforms.
Web Performance: Our experts can audit, transform the architecture, and optimize your website to meet the 100 SCORE Core Web Vitals for exceptional web performance.

If you’re looking for expertise in headless CMS, NextJS, or eCommerce, get in touch with FocusReactive today. Visit our website at focusreactive.com to learn more about how we can help you accelerate your business growth.