This starter uses SvelteKit for the frontend and Sanity to handle its content.
- How to fetch content as data from the Sanity Content Lake
- How to render block content with Portable Text
- A Sanity Studio to create and edit content
- How to crop and render images with Sanity Image URLs
Note
This starter features an
/app
and a/studio
folder. The/app
folder contains the frontend code, and the/studio
folder contains the Sanity Studio code.This is not a monorepo setup. We put them both in one repository for the sake of simplicity. You might want to have separate repositories for each of the folders, to make it easier to deploy the app and the studio separately.
- Node.js (v14.18 or later)
- Sanity CLI (optional)
The following commands are meant to be run in both the /app
and /studio
folders.
npm install
to install dependenciesnpx -y sanity@latest init --env
, this will:
- ask you to select or create a Sanity project and dataset, use the same Sanity project and dataset in both folders.
- output a
.env
file with appropriate variables - (or use
sanity init --env
if you have the CLI installed)
- Prefix your environment variables in the SvelteKit
/app
folder withPUBLIC_
, they should bePUBLIC_SANITY_DATASET
andPUBLIC_SANITY_PROJECT_ID
. npm run dev
to start the development server
Your SvelteKit app should now be running on http://localhost:5173/ and Studio on http://localhost:3333/.
Feel free to move each of the folders to their own location and check them into version control.
- Visit the Studio and create and publish a new
Post
document - Visit the App and refresh the page to see your content rendered on the page
The schema for the Post
document is defined in the /studio/schemas
folder. You can add more documents and schemas to the Studio to suit your needs.
If you do not wish to use TypeScript, we've included a remove-typescript.mjs
file in the root of this repository.
To run this file, you must:
- Run
npm install
in the repository root to install dependencies - Run
node remove-typescript.mjs
to strip all types from both the/app
and/studio
folders
If you intend to use TypeScript or have stripped TypeScript, you can safely delete all files in the repository root that isn't /studio
or /app
.
The /app
and /studio
folders are meant to be deployed separately.
Feel free to deploy the App to whichever hosting provider you prefer. We recommend Vercel.
You can deploy the Sanity Studio by running sanity deploy
in the /studio
repository, provided you have the @sanity/cli
installed globally.