-
Notifications
You must be signed in to change notification settings - Fork 29
Update template to pass sanity's template validator #46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
bb2eaf7
Update template to pass sanity's template validator
kenjonespizza c3a75aa
Update package.json
kenjonespizza bae54d0
Update Readme and bump packages.
kenjonespizza 918c478
Update Readme
kenjonespizza 42ff141
rename app dir
kenjonespizza ed3a47d
Update 'app' to 'sveltekit-app' for consistency
kenjonespizza 7469521
Update root .gitignore
kenjonespizza 3ddcd5f
remove .DS_Store
kenjonespizza 9f62ae1
Update Readme
kenjonespizza File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
name: Validate Template | ||
on: push | ||
|
||
jobs: | ||
validate: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- uses: actions/checkout@v4 | ||
- name: Validate Sanity Template | ||
uses: sanity-io/[email protected] | ||
with: | ||
repository: ${{ github.repository }} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,74 +1,97 @@ | ||
# A minimal SvelteKit site with Sanity Studio | ||
# Minimal SvelteKit Site with Sanity Studio | ||
|
||
This starter uses [SvelteKit](https://kit.svelte.dev/) for the frontend and [Sanity](https://sanity.io/) to handle its content. | ||
A streamlined starter template using [SvelteKit](https://kit.svelte.dev/) for the frontend and [Sanity](https://sanity.io/) for robust content management. | ||
|
||
## Featuring | ||
 | ||
|
||
- How to fetch content as data from [the Sanity Content Lake](https://www.sanity.io/docs/datastore) | ||
- How to render block content with [Portable Text](https://www.sanity.io/docs/presenting-block-text) | ||
- A [Sanity Studio](https://www.sanity.io/docs/sanity-studio) to create and edit content | ||
- Visual editing with live updates through [Presentation](https://www.sanity.io/docs/presentation) | ||
- How to crop and render images with [Sanity Image URLs](https://www.sanity.io/docs/image-url) | ||
## Features | ||
|
||
> **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. | ||
> | ||
> 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. | ||
* Fetch content seamlessly with [Sanity Content Lake](https://www.sanity.io/docs/datastore). | ||
* Render beautiful block content using [Portable Text](https://www.sanity.io/docs/presenting-block-text). | ||
* Manage and create content with the intuitive [Sanity Studio](https://www.sanity.io/docs/sanity-studio). | ||
* Live visual editing through [Sanity's Presentation tools](https://www.sanity.io/docs/presentation). | ||
* Advanced image cropping and rendering via [Sanity Image URLs](https://www.sanity.io/docs/image-url). | ||
|
||
## Prerequisities | ||
## Demo | ||
|
||
- [Node.js](https://nodejs.org/en/) (v14.18 or later) | ||
- [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (optional) | ||
[Try the live demo](https://sanity-template-sveltekit-clean.sanity.build/) | ||
|
||
## Getting started | ||
## Getting Started | ||
|
||
Run the following commands to prepare both applications, each step should be executed from the **root directory**: | ||
### Prerequisites | ||
|
||
1. Install dependencies. | ||
* [Node.js](https://nodejs.org/en/) (v18.13 or later) | ||
* [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (optional) | ||
|
||
```sh | ||
pnpm install | ||
``` | ||
### Install the template | ||
|
||
2. Select or create a Sanity project and dataset, and output the details to a `.env` file. | ||
This template includes a SvelteKit app and a Sanity Studio – an open-source React application that connects to your project’s hosted dataset. The Studio is configured locally and then deployed for content collaborators. Content and assets from the hosted dataset can be queried from Sanity’s APIs. | ||
|
||
```sh | ||
cd studio && pnpm sanity init --env .env | ||
``` | ||
#### 1. Initialize template with Sanity CLI | ||
|
||
3. [Generate a token](https://www.sanity.io/docs/http-auth#4c21d7b829fe) with read permissions for use in the next step. | ||
Run the command in your Terminal to initialize this template on your local computer. | ||
|
||
```sh | ||
pnpm sanity manage | ||
See the documentation if you are [having issues with the CLI](https://www.sanity.io/help/cli-errors). | ||
|
||
```shell | ||
npm create sanity@latest -- --template sanity-template-sveltekit-clean | ||
``` | ||
|
||
4. Copy the example app `.env` file and populate it with the required values. | ||
#### 2. Run the application and Sanity Studio | ||
|
||
Navigate to the template directory using `cd <your app name>`, and start the development servers by running the following command | ||
|
||
```sh | ||
cp ./app/.env.example ./app/.env | ||
```shell | ||
npm run dev | ||
``` | ||
|
||
5. Start the development servers: | ||
#### 3. Open the app and sign in to the Studio | ||
|
||
Open the SvelteKit app running locally in your browser on [http://localhost:5173](http://localhost:5173). | ||
|
||
Open the Studio running locally in your browser on [http://localhost:3333](http://localhost:3333). You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI. | ||
|
||
### Adding content with Sanity | ||
The template comes pre-defined with a schema containing a `Post` document type. | ||
|
||
|
||
#### Publish your first document | ||
From the Studio, click "+ Create" and select the `Post` document type. Go ahead and create and publish the document. | ||
|
||
Your content should now appear in your SvelteKit app ([http://localhost:3000](http://localhost:3000)) as well as in the Studio on the "Presentation" Tab | ||
|
||
#### Extending the Sanity schema | ||
The schema for the `Post` document type is defined in the `studio/src/schemaTypes/post.ts` file. You can [add more document types](https://www.sanity.io/docs/schema-types) to the schema to suit your needs. | ||
|
||
### Deploying your application and inviting editors | ||
Your SvelteKit frontend (`/sveltekit-app`) and Sanity Studio (`/studio`) are still only running on your local computer. It's time to deploy and get it into the hands of other content editors. | ||
|
||
#### Deploy Sanity Studio | ||
|
||
Back in your Studio directory (`/studio`), run the following command to deploy your Sanity Studio. | ||
|
||
```sh | ||
pnpm dev | ||
```shell | ||
npx sanity deploy | ||
``` | ||
|
||
- Your SvelteKit app should now be running on [http://localhost:5173/](http://localhost:5173/). | ||
- Your Studio should now be running on [http://localhost:3333/](http://localhost:3333/). | ||
#### Deploy SvelteKit app to Vercel | ||
|
||
### Add content | ||
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. | ||
|
||
1. Visit the Studio and create and publish a new `Post` document | ||
2. Visit the App and refresh the page to see your content rendered on the page | ||
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). | ||
2. Create a new Vercel project and connect it to your Github repository. | ||
3. Set the `Root Directory` to your SvelteKit app. | ||
4. Configure your Environment Variables. | ||
|
||
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. | ||
#### Invite a collaborator | ||
Now that you’ve deployed your SvelteKit application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up [Manage](https://www.sanity.io/manage), select your project and click "Invite project members" | ||
|
||
## Deployments | ||
They will be able to access the deployed Studio, where you can collaborate together on creating content. | ||
|
||
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`. | ||
## Resources | ||
|
||
And `/app` has a `.env` file with `PUBLIC_SANITY_STUDIO_URL` that points to the Studio's deployment URL. | ||
* [SvelteKit Documentation](https://svelte.dev/docs/kit/introduction/) | ||
* [Sanity.io Documentation](https://www.sanity.io/docs/) | ||
* [Portable Text Guide](https://www.sanity.io/docs/presenting-block-text) | ||
* [Join the Sanity Community](https://slack.sanity.io) |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be removed from git log and added to gitignore