Using Sanity Kitchen Sink locally without Netlify or GitHub for Gatsby

63 replies
Last updated: May 12, 2020
A possibility to use kitchen-sink without any connection to netlify or github, locally to get deeper into the way Sanity is linked with Gatsby
AI Update

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-sink

2. Install Dependencies

# Install root dependencies
npm install

# Install Studio dependencies
cd build/studio
sanity install

# Install web (Gatsby) dependencies
cd ../web
npm install

3. 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 init

This 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 dev

The 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 thread
63 replies
You could clone this repo and use the contents of its
template
folder locally: https://github.com/sanity-io/sanity-template-kitchen-sink
Thank you (Removed Name), that is what I started to try this morning.
this is feed back:I have taken the repo from template folder,
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.
Second thing:I am surprised to see the number of negatives opinions on the video of
user F
: 14 towards 64, its a lot!Personally I don't think that the video is negative: I like the idea and the project is great (I don't think it sufficiently positive either though).
Toward the pedagogy (and style) of
user Y
it is certainly difficult for
user F
!But moreover, generally (I hope I am not going to shock anybody over there) I feel that there is a weak point in the Sanity strategy as there are many persons like me as far as I can see in the slack channel, that are not really sufficiently talented to immediately get into the refinement of Sanity and they end «lost in translation».
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
user Y
and there are great because short, pedagogic...About Twitch, I am not convinced: it's endless, lost of hesitations, self contentment also because of social positions.
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!
Re reading what I wrote, I am thinking that what is may be missing is just elements of information describing what «is under the hood».
Thanks for the feedback
user H
! There’s a lot to unpack here, but I think we generally agree: We need more pedagogics around the different parts of Sanity (and integrating with it), and it needs to be chunked into smaller piece, and we need to account for more experience levels.
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.
Thanks
user Y
I was very much afraid of be taken as a critic: this is not at all my point.
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.
[My particular difficulty was that I already have a Netlify repo that I use with the beginning of my project.Therefore to test it with create forces me to change plan on Netlify... while it would be just for testing...]
Ah, we weren't aware of that limitation! We have talked about making it possible for you to launch without having to deploy on Netlify, so this is +1 towards that feature
Great!
I'm still in trying to populate the kitchen sink.To tell about where I am and what I do:
• 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...
I am now with the setting of the gatsby part:I am not quite sur (as I am away from the track) where I should define the dataset, the project id...
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...
help ideas-and-feedbackok I have set the gatsby part of the
kitchen-sink-demo
from 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.js
exists (there is a
useCallback
in
import React, { useState, useMemo , useCallback } from 'react'
that is not used) (location is different: in the error message
components\Latex.js
in reality
components\preview\Latex.js
) (there is
latex.js
and
Latex.js
) (there is also a
latext.js
in
schemas\latex.js
which is strange).2. for
cta-columns.js
it does not exist literally (only
ctaColumns.js
exists 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.js
so it is probably coming with Sanity backend? Like for
helpers.js
,
page.js
Hi there!I really need help as I am running into errors and don' know at all what I can do.
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
>
web
and
studio
folders under, orchestrated by
lerna
on top).Contrarily to the example, I am not using
npm
but
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
let's precise: I can't see anything on
localhost:8000
, nor in the
studio
,
Web preview
.
What node version are you on?
node -v
v10.15.3
(thank for your help ☆)
I would try to upgrade node – it's on 14 now
let's do that
That's what I got from searching your errors and leafing through github issues for gatsby at least
let's do that first yes!
installation is taking some time (several minutes)
still going on!
it is still not completely finished but the installed node version is not v14 but v12.16.3 (I am on Windows x84).
I have to reboot my computer. Let's do that.
Node v12 is fine, that’s the latest LTS (long term support) version
Thanks ☆ let's reboot ♪
Hello (Removed Name). Glad to see you!
Unfortunately, I still have the same errors (I joined 2 screen captures so that you can see the whole log from start)
Could you try removing your
.cache
and
node_modules
folders, as well as your
package-lock.json
file, and running
npm install
before trying once again?
yes
could you precise in all folders? (root? web? studio?)
In your web folder, and also check for any
yarn-lock.json
file there (if it’s there, remove that one too)
ok so web folder first
(Just the web folder, no need for the others in this case)
Understood!
Also, after running
npm install
, do a
gatsby clean
before
gatsby develop
, just in case.
Before, I was going to root (
francois-vidit-2-2-com
folder) then command
yarn run dev
that would action remote
gatsby clean
and
develop
from there.Could you confirm that you want me to do from
web
,
gatsby clean
and
develop
?
The root folder uses
lerna
to 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 develop
in the web folder. If that completes successfully, you can go back and run
yarn run dev
in the root folder like before.
Something strange after npm install for information:
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
I tried to do
npm upgrade gatsby-source-sanity@5.0.6
but I missed itso I did
uninstall
then
install gatsby-source-sanity@5.0.6
.It is now therefore
5.0.6
.
I just read now your previous post.First, thank you.
Second, yes let's do that now!
Here is what I have now.A problem with react-helmet,
the same errors as before.
It seems that helmet is not correctly imported for some reasons.
my version of react-helmet:
react-helmet@6.0.0
implies some breaking changes:
https://github.com/nfl/react-helmet#readme
How are you importing Helmet on your page? As follows?
import { Helmet } from 'react-helmet'
Also, we seem to have some more information on the WebPack error: No PostCSS config found.
I don't know what page we are talking about,because it's from the kitchen-sink example I am discovering.
Do you have a
postcss.config.js
file in your web root?And you can try downgrading to Helmet
^5.2.1
for now. It’s just a warning though, so it shouldn’t prevent your build from completing.
ok so I regressed to react-helmet@5.2.0,got out of the react-helmet error.
the other errors are still there:
• footer.js
• serializer.js
• helpers.js
• page.js
• then the webpack errors.
No I don't (have any
postcss.config.js
).(as there were none in the
kitchen-sink repo
)
There should be: https://github.com/sanity-io/sanity-template-kitchen-sink/blob/master/template/web/postcss.config.js
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")
  ]
});
You can ignore the warnings for now, let’s focus on the errors
🙂
O K ! ! ! !Hurrah ! ! !
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 still have some errors,here there are
Sorry (Removed Name),I got myself confused again,
I am not getting errors,
but only warnings.
That’s good news, right? 🙂 Looks like you’re up and running again 🚀
Regarding the warnings, try searching for
ESLintError
and the specific warning code, such as
no-unused-vars
to 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-vars
ones, for example, are just about not having unnecessary code in your files. If you don’t plan on using e.g.
useState
in the page template, you can remove that line and the warning should disappear.
As you can imagine,it's working also perfectly in the studio now!
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 ! ! !
Do a
francois clean
and
francois develop
and you should be back in the game 😛
just took knowledge of your new post,I will do that.
Also a
François upgrade
🤣That is really funny.
I have a question:are you located in Norway, in San Francisco, or somewhere else?
I would bet for Norway.
That might take a moment to resolve 😄 Sanity as a team is currently working remotely from home because of the circumstances. But normally it is based in both Oslo and SF. Personally, I’m working from Spain and sometimes from the Netherlands, so I’m a bit of an exception to the rule.
I can't help thinking that it is a situation pretty much like those intellectuals of the end of the XVth century all over Europe (Erasmus particularly meaningful to you if you are sometimes in the Netherlands) that would have latin in common...At the same time, completely different backgrounds,
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...
(Removed Name) into the place!

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.

Was this answer helpful?