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
- Visual editing with live updates through Presentation
- How to crop and render images with Sanity Image URLs
Note
This starter features an
/appand a/studiofolder. The/appfolder contains the frontend code, and the/studiofolder contains the Sanity Studio code.It is configured as a monorepo using pnpm workspaces, but you can treat these directories as separate projects if you prefer.
- Node.js (v14.18 or later)
- Sanity CLI (optional)
Run the following commands to prepare both applications, each step should be executed from the root directory:
- Install dependencies.
pnpm install- Select or create a Sanity project and dataset, and output the details to a
.envfile.
cd studio && pnpm sanity init --env .env- Generate a token with read permissions for use in the next step.
pnpm sanity manage- Copy the example app
.envfile and populate it with the required values.
cp ./app/.env.example ./app/.env- Start the development servers:
pnpm dev- Your SvelteKit app should now be running on http://localhost:5173/.
- Your Studio should now be running on http://localhost:3333/.
- Visit the Studio and create and publish a new
Postdocument - 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.
The /app and /studio folders are meant to be deployed separately.
Make sure that after /app is deployed the .env file in /studio is updated with its deployment URL under SANITY_STUDIO_PREVIEW_URL.
And /app has a .env file with PUBLIC_SANITY_STUDIO_URL that points to the Studio's deployment URL.