How to deploy Sanity Studio to Netlify in a monorepo with Gatsby

17 replies
Last updated: Aug 20, 2020
hi, I followed the Sanity-Gatsby tutorial below and was able to deploy to Netlify, but couldn’t figure out the part about deploying the Studio to Netlify:
https://www.sanity.io/blog/how-to-quickly-set-up-a-gatsby-js-jamstack-website-with-a-headless-cms
AI Update

Great question! Deploying Sanity Studio to Netlify is definitely doable. Since the tutorial focuses on deploying your Gatsby site, I'll walk you through the Studio deployment part.

Quick Overview

Sanity Studio is a React Single Page Application (SPA), so you can self-host it on Netlify. You'll need to build the Studio into static files and configure Netlify to handle SPA routing properly.

Step-by-Step Deployment

1. Build Configuration

In your Netlify settings (or netlify.toml file), configure:

  • Build command: sanity build
  • Publish directory: dist

If you're working with a monorepo where your Studio is in a subdirectory (like studio/), you'll need to:

  • Set the base directory to studio (or wherever your Studio lives)
  • Keep publish directory as dist
  • Your build command would still be sanity build

Here's an example netlify.toml for a monorepo setup:

[build]
  base = "studio/"
  command = "sanity build"
  publish = "dist"

2. SPA Redirect Configuration

Since Sanity Studio is an SPA, you need to tell Netlify to redirect all routes to index.html. Create a _redirects file in your Studio's static folder (create the folder if it doesn't exist):

/*    /index.html   200

This ensures that navigating directly to Studio routes (like /desk or /vision) works correctly instead of returning 404 errors.

3. CORS Origins Setup

This is crucial! After your Studio is deployed to Netlify, you need to add the Netlify URL to your Sanity project's CORS origins:

  1. Go to manage.sanity.io
  2. Select your project
  3. Navigate to Settings → API → CORS Origins
  4. Click Add CORS origin
  5. Add your Netlify URL (e.g., https://your-studio-name.netlify.app)
  6. Important: Check the "Allow credentials" box
  7. Save

Without this step, your Studio won't be able to authenticate and access your content.

Alternative: Use sanity deploy

Just a heads up—while self-hosting on Netlify works great, Sanity also offers hosted Studio deployment with the sanity deploy command. This gives you a *.sanity.studio URL with automatic SSL, no CORS configuration needed, and it's the recommended approach since it automatically deploys your schema for features like AI Agent Actions.

You can run both! Many teams use sanity deploy for their production Studio while keeping Netlify for the Gatsby frontend.

Troubleshooting Tips

  • Build fails: Make sure @sanity/cli is in your package.json dependencies
  • CORS errors: Double-check that your exact Netlify URL (including https://) is in CORS origins with "Allow credentials" enabled
  • 404 on routes: Verify the _redirects file is in the static folder and contains the SPA redirect rule

Hope this helps you get your Studio deployed! Let me know if you run into any issues with these steps.

Hi User, you can deploy your Studio to Netlify choosing the New GitHub site option, if you run
sanity deploy
on your folder, your Studio will be deployed to <your-project>.sanity.studio
hi
user A
, thanks for the response … am trying that right now … screenshot below of my Netlify new github site config … what should I put for
Publish directory
? Everything else looks OK?
If you have a repo just for your studio, the publish directory will be
dist
if you have a repo with both your studio and your gatsby site, the publish directory will be something like this
studio/dist
your build command will be npm/yarn build, also make sure you have
user U
/cli in your dependencies
here’s an example of my netlify config and package.json in case in useful for you
hmmm, a little confused … I’m working through the example gatsby-sanity project at https://github.com/sanity-io/example-company-website-gatsby-sanity-combo.git , which is a monorepo that has both gatsby (in the /web folder) and the sanity studio (in the /sanity) folder … I forked this repo and pushed it to my a repo on my github account … I was able to deploy the static site and wondering how to deploy the studio … do I need to make a separate repo with just the /sanity folder?
sorry, a little confused
no, you can work with that repo, your base directory will be studio and your public folder will be dist, it works just like the deployment of the static site
if you still need help, you can check this blogpost 🙂

https://maxkarlsson.dev/blog/2020/01/how-to-setup-a-self-hosted-sanity-studio/
I set up the deploy settings for the studio as follows:
looks right? Then I saved the settings and triggered the deploy
Then saw this unusual item from the deploy log:

9:05:52 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'web' versus 'Studio' in the Netlify UI
9:05:52 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'web/public' versus 'dist' in the Netlify UI
Like it detected the
netlify.toml
file in the git root and ignored my
Base directory
setting
When I click on the URL of the deployed site, I see the static site built by Gatsby instead of the Sanity Studio: https://pensive-perlman-798bc1.netlify.app/
your configuration looks right, I am not sure if you need the base directory in lowercase
studio
, about the
netlify.toml
, you can have one in each folder (without the base specification) and remove the
netlify.toml
from the root
thanks
user A
, I removed the netlify.toml from my git root, pushed back up to git, and the studio (and static site) are working now!
Great! 🙌

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?