Deploy Studio and Frontend Separately with Existing Dataset

Good news - deploying your Studio and frontend to different locations is totally doable and actually quite common! Here's what you need to know to get this working smoothly.

The Basic Setup

When connecting a new Studio to an existing dataset, you need to configure your Studio's sanity.config.js (or .ts) file with the correct project ID and dataset name. This is your main configuration file where all Studio settings are defined:

import { defineConfig } from 'sanity'
import { deskTool } from 'sanity/desk'

export default defineConfig({
  projectId: 'your-project-id',
  dataset: 'your-existing-dataset',
  plugins: [deskTool()],
  // ... other config
})

Your frontend application uses the same projectId and dataset values when initializing the Sanity client, but they're completely separate deployments.

CORS Configuration - This is Likely Your Issue!

The most common problem when deploying to different locations is CORS (Cross-Origin Resource Sharing) configuration. When your Studio and frontend are on different domains, you need to explicitly allow those domains to access your Sanity project.

Head to manage.sanity.io, navigate to your project, then go to Settings > API > CORS Origins. You'll need to add:

1. Your Studio URL (e.g., https://your-studio.sanity.studio or wherever you're hosting it)
2. Your frontend URL (e.g., https://yoursite.com)
3. For local development: http://localhost:3000 (or whatever port you're using)

Important: Make sure to check the "Allow credentials" box if you're using authentication tokens. This is required when the Access-Control-Allow-Credentials header needs to be set to 'true'.

Deployment Options for Studio

You have a few options for deploying your Studio:

Option 1: Sanity's Hosted Platform (Recommended)

Use the sanity deploy command to deploy to Sanity's hosting:

sanity deploy

This gives you a *.sanity.studio domain, automatically handles schema deployment for platform features like AI Agent Actions, and requires minimal configuration.

Option 2: Self-Hosted

Since Studio is just a React SPA, you can deploy it to Vercel, Netlify, or any other hosting provider. Just make sure to add your deployment URL to CORS origins.

Working with Existing Datasets

If you're specifically trying to copy data from an existing dataset to a new project, you have a couple of options:

1. CLI Export/Import: Use the Sanity CLI commands to export from one dataset and import to another:

   # Export from existing project
   sanity dataset export production export.ndjson
   
   # Import to new project
   sanity dataset import export.ndjson production

2. Cross Dataset Duplicator Plugin: Install the @sanity/cross-dataset-duplicator plugin to migrate documents and assets between projects directly from the Studio interface - great if you prefer a GUI approach.

Quick Troubleshooting Checklist

• ✅ Verify your projectId and dataset match in both Studio and frontend configs
• ✅ Add all deployment URLs to CORS origins in Sanity Manage
• ✅ Enable "Allow credentials" for origins using authentication
• ✅ Double-check protocol (http:// vs https://) - they must match exactly
• ✅ If using a custom domain, make sure it's added to CORS

The separate deployment approach is actually ideal - it lets you deploy your Studio independently from your frontend, which is perfect for content teams who need Studio access without touching your production site!