Skip to content

Commit bae54d0

Browse files
committed
Update Readme and bump packages.
1 parent c3a75aa commit bae54d0

File tree

8 files changed

+14446
-51
lines changed

8 files changed

+14446
-51
lines changed

.DS_Store

6 KB
Binary file not shown.

README.md

+76-45
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,105 @@
1-
# A minimal SvelteKit site with Sanity Studio
1+
# Minimal SvelteKit Site with Sanity Studio
22

3-
This starter uses [SvelteKit](https://kit.svelte.dev/) for the frontend and [Sanity](https://sanity.io/) to handle its content.
3+
A streamlined starter template using [SvelteKit](https://kit.svelte.dev/) for the frontend and [Sanity](https://sanity.io/) for robust content management.
44

5-
## Featuring
5+
![Screenshot of the SvelteKit and Sanity starter template](https://cdn.sanity.io/images/fkfgfb3d/production/c2d160119421bb5059b5e9229e7afa5ab6acfc1b-833x467.png?auto=format)
66

7-
- How to fetch content as data from [the Sanity Content Lake](https://www.sanity.io/docs/datastore)
8-
- How to render block content with [Portable Text](https://www.sanity.io/docs/presenting-block-text)
9-
- A [Sanity Studio](https://www.sanity.io/docs/sanity-studio) to create and edit content
10-
- Visual editing with live updates through [Presentation](https://www.sanity.io/docs/presentation)
11-
- How to crop and render images with [Sanity Image URLs](https://www.sanity.io/docs/image-url)
7+
## Features
128

13-
> **Note**
14-
>
15-
> 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.
16-
>
17-
> It is configured as a monorepo using [pnpm workspaces](https://pnpm.io/workspaces), but you can treat these directories as separate projects if you prefer.
9+
* Fetch content seamlessly with [Sanity Content Lake](https://www.sanity.io/docs/datastore).
10+
* Render beautiful block content using [Portable Text](https://www.sanity.io/docs/presenting-block-text).
11+
* Manage and create content with the intuitive [Sanity Studio](https://www.sanity.io/docs/sanity-studio).
12+
* Live visual editing through [Sanity's Presentation tools](https://www.sanity.io/docs/presentation).
13+
* Advanced image cropping and rendering via [Sanity Image URLs](https://www.sanity.io/docs/image-url).
1814

19-
## Prerequisities
15+
## Demo
2016

21-
- [Node.js](https://nodejs.org/en/) (v14.18 or later)
22-
- [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (optional)
17+
[Try the live demo](https://sanity-template-sveltekit-clean.sanity.build/)
2318

24-
## Getting started
19+
## Getting Started
2520

26-
Run the following commands to prepare both applications, each step should be executed from the **root directory**:
21+
### Prerequisites
2722

28-
1. Install dependencies.
23+
Ensure you have the following tools installed:
2924

30-
```sh
31-
pnpm install
32-
```
25+
* [Node.js](https://nodejs.org/en/) (v18.13 or later)
26+
* [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (optional)
3327

34-
2. Select or create a Sanity project and dataset, and output the details to a `.env` file.
28+
### Setup Steps
3529

36-
```sh
37-
cd studio && pnpm sanity init --env .env
38-
```
30+
#### 1. Install the template
3931

40-
3. [Generate a token](https://www.sanity.io/docs/http-auth#4c21d7b829fe) with read permissions for use in the next step.
32+
Run the command in your Terminal to initialize this template on your local computer.
4133

42-
```sh
43-
pnpm sanity manage
34+
See the documentation if you are [having issues with the CLI](https://www.sanity.io/help/cli-errors).
35+
36+
```shell
37+
npm create sanity@latest --template sanity-template-sveltekit-clean
4438
```
39+
The command prepares your SvelteKit app and Sanity Studio app.
4540

46-
4. Copy the example app `.env` file and populate it with the required values.
41+
Change directories into your app
4742

48-
```sh
49-
cp ./app/.env.example ./app/.env
43+
```shell
44+
cd <your app name>
5045
```
5146

52-
5. Start the development servers:
47+
#### 2. Run both the website and Sanity Studio locally
5348

54-
```sh
55-
pnpm dev
56-
```
49+
To run both apps locally you can simply run the first command here. However, you still have the ability to run your website app and Sanity Studio app separately by changing directories into each of them and running `npm run dev`.
5750

58-
- Your SvelteKit app should now be running on [http://localhost:5173/](http://localhost:5173/).
59-
- Your Studio should now be running on [http://localhost:3333/](http://localhost:3333/).
51+
```shell
52+
npm run dev
53+
```
54+
Or run them separately:
55+
```shell
56+
# For the SvelteKit app
57+
cd app
58+
npm run dev
59+
60+
# For Sanity Studio
61+
cd studio
62+
npm run dev
63+
```
6064

61-
### Add content
65+
Your SvelteKit app will be live at [http://localhost:5173](http://localhost:5173/)
6266

63-
1. Visit the Studio and create and publish a new `Post` document
64-
2. Visit the App and refresh the page to see your content rendered on the page
67+
### Adding Content
6568

66-
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.
69+
1. Open the Studio and create a new `Post` document.
70+
2. Publish your changes.
71+
3. Refresh the app to see your content live.
6772

68-
## Deployments
73+
### Deployments
6974

7075
The `/app` and `/studio` folders are meant to be deployed separately.
7176

72-
Make sure that after `/app` is deployed the `.env` file in `/studio` is updated with its deployment URL under `SANITY_STUDIO_PREVIEW_URL`.
77+
#### How to deploy your Sanity Studio
78+
79+
Use this command to deploy your Studio. If you’ve set a `SANITY_STUDIO_STUDIO_HOST` in `.env.production`, your Studio will deploy to `<SANITY_STUDIO_STUDIO_HOST>.sanity.studio` *if the subdomain is available*. Otherwise you'll be prompted to enter a Studio Hostname.
80+
81+
> Optionally, you have the freedom to host your Studio with the provider of your choice. [Learn more](https://www.sanity.io/docs/deployment) about hosting you Sanity Studio.
82+
83+
```shell
84+
npx sanity deploy
85+
```
86+
87+
#### How to deploy your SvelteKit app to Vercel
88+
89+
You have the freedom to deploy your SvelteKit app to your hosting provider of choice. With Vercel and GitHub being a popular choice, we'll cover the basics of that approach.
90+
91+
1. Create a GitHub repository from this project. [Learn more](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github) about how to create a GitHub repository.
92+
2. Create a new Vercel project and connect it to your Github repository.
93+
3. **Important** - Set the `Root Directory` to your SveltKit app.
94+
![Screenshot of the website generated by this template](https://cdn.sanity.io/images/fkfgfb3d/production/039cf5de54561b491c044ebb93f6c1f293a4ab58-526x605.png?auto=format)
95+
4. Configure your Environment Variables.
96+
97+
There are other ways deploy your app to Vercel without setting up a GitHub repository, but we won't be covering them. Reference the [Vercel CLI](https://vercel.com/docs/cli) for more information.
98+
99+
100+
## Resources
73101

74-
And `/app` has a `.env` file with `PUBLIC_SANITY_STUDIO_URL` that points to the Studio's deployment URL.
102+
* [SvelteKit Documentation](https://svelte.dev/docs/kit/introduction/)
103+
* [Sanity.io Documentation](https://www.sanity.io/docs/)
104+
* [Portable Text Guide](https://www.sanity.io/docs/presenting-block-text)
105+
* [Join the Sanity Community](https://slack.sanity.io)

app/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@portabletext/types": "^2.0.13",
2222
"@sanity/types": "^3.52.4",
2323
"@sveltejs/adapter-auto": "^3.2.2",
24-
"@sveltejs/kit": "^2.5.20",
24+
"@sveltejs/kit": "^2.9.0",
2525
"@sveltejs/vite-plugin-svelte": "^3.1.1",
2626
"@typescript-eslint/eslint-plugin": "^6.21.0",
2727
"@typescript-eslint/parser": "^6.21.0",

0 commit comments

Comments
 (0)