Deploy Sanity Studio to Netlify - Setup Help

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.