Using Sanity Kitchen Sink locally without Netlify or GitHub for Gatsby
Absolutely! You can run the Sanity Kitchen Sink template entirely locally without any connection to Netlify or GitHub. This is actually a great way to explore how Sanity integrates with Gatsby.
Important note: As mentioned in Sanity's blog post, the Kitchen Sink template was deprecated with Sanity Studio v3. However, you can still clone and run it locally to learn from the code.
Running Kitchen Sink Locally
Here's how to set it up completely locally:
1. Clone the Repository
git clone https://github.com/sanity-io/sanity-template-kitchen-sink.git
cd sanity-template-kitchen-sink2. Install Dependencies
# Install root dependencies
npm install
# Install Studio dependencies
cd build/studio
sanity install
# Install web (Gatsby) dependencies
cd ../web
npm install3. Set Up Your Local Sanity Project
You'll need a free Sanity account to connect to the Content Lake, but you don't need Netlify or GitHub:
cd build/studio
sanity initThis creates a new Sanity project and dataset for you to work with locally.
4. Run Both Studio and Frontend Locally
# In one terminal - run Sanity Studio
cd build/studio
sanity start
# In another terminal - run Gatsby frontend
cd build/web
npm run devThe Studio will run at http://localhost:3333 and the Gatsby site at http://localhost:8000.
What You'll Learn
Running this locally lets you explore:
- How Sanity Studio's customizable schema works
- How Gatsby queries Sanity data using GraphQL
- The connection between structured content in Sanity and frontend presentation
- Custom input components, document structures, and validation
- Page builder patterns and content modeling
The Netlify/GitHub integration is only for deployment—the actual Sanity-Gatsby connection happens through Sanity's APIs, which you can explore entirely on your local machine.
Show original thread63 replies
templatefolder locally: https://github.com/sanity-io/sanity-template-kitchen-sink
put in into a blank clean studio.
(I haven't done the gatsby part yet)
the problem I face is that I would have like to see the example like in the video but everything is blank so that it is a lot of work to create post and so on, to just see if it is like in the video.
I tried to set with the account of (Removed Name) (like it is appearing in the github repo) but there is a matter of authentification so that it is impossible.
So it is complicated.
I mean that I would like to have a look, then to hang on with my personal project.
Toward the pedagogy (and style) of
I mean clearly see that there is something great to learn, master, but not been able even with motivation to the point without lot of effort and pain.
I would like not to be missunderstood here: I have received great support from the community each time I needed it.
But as a feedback, I think there is there a marge of progression.
Right now, in my project (sanity + gatsby + localization) I just have the choice between a superb «everything ready beyond expectations under the hood» and a «you can customize everything».
I feel there is a lack of clues to LEARN in between and clearly get what is going on «under he hood».
You are doing your best, the documentation is evolving.
There are the videos of
In my case, I would like to understand more precisely how Gatsby is linked to Sanity, I mean, there are many ways to link it: what I saw from the example of the kitchen sink is far more interesting than what I thought it would be.
I mean: it's beautiful work, I would like to get into that beauty, but I face a wall as I am not aware of the technical principles that are taking form there.
So there is definitely something to invent to point out the different concepts so that it is possible for me to dig into the subject and find my way over.
(I would like to change the example in the kitchen-sink to a different routing system, that would make localization completely arbitrary, that is to say the slug of a post in a language would not be the slug of a post in another language)
I mean: I will find my way over and my project is going to be beautiful.
What I am writing now is a feedback for the Sanity team: your project is really great, it's deserving to be more known and popular!
And we’re working on it!
We made /create in order to give people a faster experience on how Sanity works together with popular frameworks, because JAMstack does require a bit of work to get up and running (and there’s a lot of pieces). However, you lose the “progressive disclosure”, where you learn how the different parts and how it fits together “from the ground up”. And we need more content around the latter.
I love Sanity so far, even if it is difficult right now for me, but because of my lack of knowledge.
Things that would be very easy to do right now:
to allow examples to be fulled.
For instance, for the kitchen-sink to provide some guidance in order to have it set exactly like in the video.
It would be an open count or a template.
• it is difficult to find out the relationship between Frontpage, Page Builder, Blog and Pages inside Page Builder.
• I have the Content Mode Graph plugin that helps a little but...
• Isn't a Front Page a page also?
• Page Builder = element to build a page?
• Front page = root of the project?
I think I'd better look the video again...
There is an env.production already: is this just for production?
Should I make a separate env.development aside
or is that has been automatically created?
As I have two datasets and development is already used, I am now on production for testing but...
kitchen-sink-demofrom scratch step by step from previous post.I am pretty proud of myself because it seems not too bad.
I have little errors that seems to me on details but (!) (at the end of the process at least).
I tried to solve that alone but I don't really get the point:
1.
Latex.jsexists (there is a
useCallbackin
import React, { useState, useMemo , useCallback } from 'react'components\Latex.jsin reality
components\preview\Latex.js) (there is
latex.jsand
Latex.js) (there is also a
latext.jsin
schemas\latex.jswhich is strange).2. for
cta-columns.jsit does not exist literally (only
ctaColumns.jsexists in
schemas/plug/ctaColumns.js) (is this an error?)3. for
footer.js,nothing in components as mentioned (is this the problem?) (nothing anywhere else in
schemas)4. there are other errors: same thing: cannot see any
serializer.jsso it is probably coming with Sanity backend? Like for
helpers.js,
page.js
Towards yesterday, I have solve a few things.
Please find below the last
WEBPACK ERROR messages.Towards that I cleaned everything (deleted
yarn.lock,
node_modules,
cache).I am installing the kitchen-sink example (
project folder>
weband
studiofolders under, orchestrated by
lernaon top).Contrarily to the example, I am not using
npmbut
yarn(would that be a problem?) (I have modified the commands as much as I could to adapt by there are probably some I haven't seen?).Any help very much appreciated ☆
help
localhost:8000, nor in the
studio,
Web preview.
.cacheand
node_modulesfolders, as well as your
package-lock.jsonfile, and running
npm installbefore trying once again?
yarn-lock.jsonfile there (if it’s there, remove that one too)
npm install, do a
gatsby cleanbefore
gatsby develop, just in case.
francois-vidit-2-2-comfolder) then command
yarn run devthat would action remote
gatsby cleanand
developfrom there.Could you confirm that you want me to do from
web,
gatsby cleanand
develop?
lernato run a bunch of things at the same time, including the studio build. That’s totally OK so you can do that instead, but it’s a bit quicker to test just the Gatsby build if you run
gatsby developin the web folder. If that completes successfully, you can go back and run
yarn run devin the root folder like before.
C:\xampp\htdocs\<http://francois-vidit-2-2.com|francois-vidit-2-2.com>\web>npm outdated Package Current Wanted Latest Location gatsby-source-sanity 6.0.0-beta.0 6.0.0-beta.0 5.0.6 gatsby-starter-hello-world_sanity-kitchen-sink-web
npm upgrade gatsby-source-sanity@5.0.6but I missed itso I did
uninstallthen
install gatsby-source-sanity@5.0.6.It is now therefore
5.0.6.
Second, yes let's do that now!
the same errors as before.
It seems that helmet is not correctly imported for some reasons.
react-helmet@6.0.0
https://github.com/nfl/react-helmet#readme
import { Helmet } from 'react-helmet'postcss.config.jsfile in your web root?And you can try downgrading to Helmet
^5.2.1for now. It’s just a warning though, so it shouldn’t prevent your build from completing.
the other errors are still there:
• footer.js
• serializer.js
• helpers.js
• page.js
• then the webpack errors.
postcss.config.js).(as there were none in the
kitchen-sink repo)
But if not, please create that file in your web folder with the following contents:
module.exports = () => ({
plugins: [
require("postcss-import"),
require("postcss-preset-env")({
stage: 3,
features: {
"color-mod-function": { unresolved: "warn" },
"nesting-rules": true,
"custom-media-queries": {
preserve: false
},
"custom-properties": {
preserve: false
}
}
}),
require("tailwindcss")
]
});🙂
I have a beautiful page on localhost:8000
Thanks to you (Removed Name)!
(I would really not been able to get out there alone!)
♪ I am so happy ☆
I am not getting errors,
but only warnings.
Regarding the warnings, try searching for
ESLintErrorand the specific warning code, such as
no-unused-varsto better understand what the warning is about and how you might resolve it. There should be plenty of explanations out there and it’s completely normal that these warnings show up from time to time.
The three
no-unused-varsones, for example, are just about not having unnecessary code in your files. If you don’t plan on using e.g.
useStatein the page template, you can remove that line and the warning should disappear.
the preview is really nice!
(there are plenty of things to see, change, understand!!!)
Thanks, thanks, thanks ☆
(I feel exhausted, I have to make a break to realise the new situation - I need to
rebuild!) (Ah ah ah!)I feel really grateful of your help.
T H A N K Y O U ! ! !
francois cleanand
francois developand you should be back in the game 😛
François upgrade🤣That is really funny.
I would bet for Norway.
and at the same time, lots of things in common...
All with probably the same conscience of being part of a very bif change, at the same time as lots of dramas...
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.