A plan to add Sanity to a Sveltekit project

Sanity is a powerful CMS that allows you to manage your content in a structured way. It is a great fit for a Sveltekit project.

In this series of blog posts, we’ll discuss deployments, roles for participants, preview modes, DNS management plans, working with subdomains, and more. After considering the options for whether to setup Sanity Studio in a separate project or in the same project, seperate seemed to be the best option.

I already have a Sveltekit project picked out that I’ve written about in the Portfolio section, the German Magic Farm site. It started out as a simple static site, but now the project dictates a need for a CMS.

I think I will recreate the Sveltkit project as a new @latest version instead of trying to maintain the current version. That way I can consider the best practices for Sveltekit and Sanity. Plus while the current version is built with some of Tailwind CSS, it was missing from the repo and I might as well start over with current installs and best practices. I will of course pull a lot of the code from the current project to the new one.

I’ll call the projects germanmagicfarm-site and germanmagicfarm-cms respectively. They will live as separate repos and have separate deployments. In the DNS I will setup a CNAME record for cms.germanmagicfarm.com to point to the Sanity Studio project. This will allow me to use the same domain for the Sveltekit site and the Sanity Studio, yet serving different purposes. We will implement a strict auth and roles policy for the Sanity Studio project.

~/Projects/
├── germanmagicfarm-site/        ← your SvelteKit frontend
└── germanmagicfarm-cms/         ← your Sanity Studio

A hard thing for me will be to keep the repos synced seperately. Because I will need to be working on them both at the same time. I need to be mindful of where I am and what I am doing.

# In germanmagicfarm-site
npm install
npm run dev

# In germanmagicfarm-cms
npm install
npm run dev

This gives:

• localhost:5173 (or similar) for SvelteKit
• localhost:3333 for Sanity Studio

I will need to share environment variables between the two projects.

SANITY_PROJECT_ID=yourprojectid
SANITY_DATASET=production

I’ve decided this will be a multi-part series. This is our introduction. Part I will kick off the process installing the applications and initializing configurations.