How to host both Sanity Studio and Frontend on the same Netlify site

Great question! Hosting both your Sanity Studio and frontend on the same Netlify site from a single repo is totally doable. Here's how to set it up:

The Key Configuration: basePath

In your Sanity Studio config file (sanity.config.ts or sanity.config.js), you need to set a basePath to tell Studio it's living at a sub-route:

import {defineConfig} from 'sanity'

export default defineConfig({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  basePath: '/admin', // or /studio, /dashboard, whatever you prefer
  // ... rest of your config
})

Routing Setup

You have two main approaches depending on your frontend framework:

Option 1: Framework with Catch-All Routes (Next.js, Nuxt, etc.)

If you're using Next.js, create a catch-all route like app/admin/[[...index]]/page.tsx (App Router) or pages/admin/[[...index]].tsx (Pages Router):

// app/admin/[[...index]]/page.tsx
import {Studio} from 'sanity'
import config from '../../../sanity.config'

export default function StudioPage() {
  return <Studio config={config} />
}

The [[...index]] pattern ensures all sub-routes under /admin get handled by the Studio.

Option 2: Netlify Redirects (Static Sites)

If you're not using a framework with built-in routing (or deploying a static build), you need to configure Netlify redirects. Create a netlify.toml file in your repo root:

[[redirects]]
  from = "/admin/*"
  to = "/admin"
  status = 301
  force = true

According to the Sanity embedding documentation, this redirect ensures all routes under /admin are properly handled by the Studio's client-side routing.

Important: CORS Settings

Don't forget to add your Netlify domain to your Sanity project's CORS origins settings with credentials enabled. Go to your project settings at manage.sanity.io and add:

• https://your-site.netlify.app (production)
• http://localhost:3000 (or whatever port you use locally)

Full Styling Requirement

The Studio needs to take full viewport height. Add this CSS wherever your /admin route renders:

#app {
  height: 100vh;
  max-height: 100dvh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

Monorepo Structure

Since everything's in the same repo, a typical structure looks like:

my-project/
├── sanity.config.ts    # Studio config
├── app/                # Your Next.js app (or other framework)
│   └── admin/[[...index]]/page.tsx
├── schemas/            # Sanity schemas
├── netlify.toml        # If using redirects
└── package.json

For more details, check out the Embedding Sanity Studio docs and the next-sanity library if you're using Next.js specifically.

The setup works great on Netlify - you'll have your frontend at the root and Studio accessible at whatever path you choose! 🎉