Git Product home page Git Product logo

sanity-template-sveltekit-clean's Introduction

A minimal SvelteKit site with Sanity Studio

This starter uses SvelteKit for the frontend and Sanity to handle its content.

Featuring

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.

Prerequisities

Getting started

The following commands are meant to be run in both the /app and /studio folders.

  1. npm install to install dependencies
  2. npx -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)
  1. Prefix your environment variables in the SvelteKit /app folder with PUBLIC_, they should be PUBLIC_SANITY_DATASET and PUBLIC_SANITY_PROJECT_ID.
  2. 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.

Add content

  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

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.

Removing TypeScript

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:

  1. Run npm install in the repository root to install dependencies
  2. 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.

Deployments

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.

sanity-template-sveltekit-clean's People

Contributors

benja avatar ehowey avatar renovate[bot] avatar stipsan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sanity-template-sveltekit-clean's Issues

Project output path

Stuck on the Getting started instructions.

What are we supposed to use for the Project output path, when running sanity init --env?

If you just leave the default path it just creates a brand new Sanity project, so you have a new Sanity project within each the App and Studio folders. That doesn't make sense to me. Meanwhile, you can't select a folder that already has files in it.

Isn't the Studio folder supposed to be where the sanity project is? Ie. not a subfolder of Studio or App.

Minor error in install instructions and mismatched env variable names

Hello!

I just went to install this and followed the readme and ran into a couple of minor errors when getting the project setup and running. Happy to make a PR for this if it helps. The second issue is maybe a bit more nuanced, IIRC there is a reason within SvelteKit to preface env variables with PUBLIC? I might be forgetting something there but I wonder if there is a need for that prefix.

  1. The command npm create sanity@latest init --env doesn't seem to work correctly, however sanity init --env does. The npm create command runs through a full install of Sanity without outputting an env variable. I think the correct command should be npx -y sanity@latest init --env.
  2. In the SvelteKit app the environment variables it is looking for are PUBLIC_SANITY_DATASET and PUBLIC_SANITY_PROJECT_ID. When you run the sanity init --env command it spits out SANITY_PROJECT_ID and SANITY_DATASET with our the PUBLIC prefix. The easiest fix for me was to just correct the environment variables themselves.

No visual editing?

Is your feature request related to a problem? Please describe.
I couldn't see that this provides visual editing, which seem like a mess to add. Hope I'm wrong. https://www.sanity.io/docs/visual-editing

Describe the solution you'd like
Sanity studio visual editing.

Describe alternatives you've considered
This is the new way for live preview while editing in Sanity studi as far as I can see.

README fixes

In the Getting started section on step 2 it says that you can use the 'sanity init --env' if you have the CLI installed.

This didn't work for me. When I tried the CLI it said that it was for V2

but then asked if I wanted to continue with the V3 installation.

I said yes and it just went ahead and created a whole new studio directory rather than just the .env file in the way that the npm package does.

Suggested Fix: Remove the line about using the CLI.

CORS issues in app

I followed the readme to bring up a working example on my local machine. I created content in the studio and was able to see it in the list of posts. However, when I clicked on it I got a 500 error. Based on the readme I would expect to be able to view the content.

I did find a work around by adding http://localhost:5173 to the list of CORS origins in the sanity portal by following the doumentation at https://www.sanity.io/docs/cors.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.


Using a curated preset maintained by


Sanity: The Composable Content Cloud

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

  • chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm
app/package.json
  • @sanity/client ^6.0.0
  • @sanity/image-url ^1.0.2
  • groq ^3.8.1
  • @portabletext/svelte ^2.1.3
  • @portabletext/types ^2.0.7
  • @sanity/types ^3.17.0
  • @sveltejs/adapter-auto ^2.1.0
  • @sveltejs/kit ^1.25.1
  • @typescript-eslint/eslint-plugin ^5.62.0
  • @typescript-eslint/parser ^5.62.0
  • autoprefixer ^10.4.16
  • eslint ^8.50.0
  • eslint-config-prettier ^9.0.0
  • eslint-plugin-svelte3 ^4.0.0
  • postcss ^8.4.31
  • prettier ^2.8.8
  • prettier-plugin-svelte ^2.10.1
  • svelte ^3.59.2
  • svelte-check ^3.5.2
  • tslib ^2.6.2
  • typescript ^5.2.2
  • vite ^4.4.10
  • node >= 14.18
package.json
  • @babel/core ^7.23.0
  • @babel/plugin-syntax-jsx ^7.22.5
  • @babel/preset-typescript ^7.23.0
  • babel-plugin-replace-ts-export-assignment ^0.0.2
  • fast-glob ^3.3.1
  • fs-extra ^11.1.1
  • prettier ^2.8.8
studio/package.json
  • @sanity/vision ^3.8.1
  • react ^18.2.0
  • react-dom ^18.2.0
  • react-is ^18.2.0
  • sanity ^3.8.1
  • styled-components ^5.2.0
  • @sanity/eslint-config-studio ^3.0.1
  • @types/react ^18.2.24
  • @types/styled-components ^5.1.28
  • eslint ^8.50.0
  • prettier ^2.8.8
  • typescript ^5.2.2
  • node >= 14.18

  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.