|
1 |
| -# A minimal SvelteKit site with Sanity Studio |
| 1 | +# Minimal SvelteKit Site with Sanity Studio |
2 | 2 |
|
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. |
4 | 4 |
|
5 |
| -## Featuring |
| 5 | + |
6 | 6 |
|
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 |
12 | 8 |
|
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). |
18 | 14 |
|
19 |
| -## Prerequisities |
| 15 | +## Demo |
20 | 16 |
|
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/) |
23 | 18 |
|
24 |
| -## Getting started |
| 19 | +## Getting Started |
25 | 20 |
|
26 |
| -Run the following commands to prepare both applications, each step should be executed from the **root directory**: |
| 21 | +### Prerequisites |
27 | 22 |
|
28 |
| -1. Install dependencies. |
| 23 | +Ensure you have the following tools installed: |
29 | 24 |
|
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) |
33 | 27 |
|
34 |
| -2. Select or create a Sanity project and dataset, and output the details to a `.env` file. |
| 28 | +### Setup Steps |
35 | 29 |
|
36 |
| -```sh |
37 |
| -cd studio && pnpm sanity init --env .env |
38 |
| -``` |
| 30 | +#### 1. Install the template |
39 | 31 |
|
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. |
41 | 33 |
|
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 |
44 | 38 | ```
|
| 39 | +The command prepares your SvelteKit app and Sanity Studio app. |
45 | 40 |
|
46 |
| -4. Copy the example app `.env` file and populate it with the required values. |
| 41 | +Change directories into your app |
47 | 42 |
|
48 |
| -```sh |
49 |
| -cp ./app/.env.example ./app/.env |
| 43 | +```shell |
| 44 | +cd <your app name> |
50 | 45 | ```
|
51 | 46 |
|
52 |
| -5. Start the development servers: |
| 47 | +#### 2. Run both the website and Sanity Studio locally |
53 | 48 |
|
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`. |
57 | 50 |
|
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 | +``` |
60 | 64 |
|
61 |
| -### Add content |
| 65 | +Your SvelteKit app will be live at [http://localhost:5173](http://localhost:5173/) |
62 | 66 |
|
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 |
65 | 68 |
|
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. |
67 | 72 |
|
68 |
| -## Deployments |
| 73 | +### Deployments |
69 | 74 |
|
70 | 75 | The `/app` and `/studio` folders are meant to be deployed separately.
|
71 | 76 |
|
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 | + |
| 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 |
73 | 101 |
|
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) |
0 commit comments