Deploying Sanity to Heroku

Hey! Happy to help you deploy Sanity Studio to Heroku! 👋

Sanity Studio is a React Single Page Application (SPA), so you can absolutely deploy it to Heroku. Here's what you need to know:

The Build Process

First, you'll need to build your Studio into static files using the sanity build command:

sanity build

This generates static HTML, CSS, and JavaScript files in a dist directory that you can serve from any web server.

Deploying to Heroku

Since Heroku doesn't natively serve static files, you have a couple of options:

Option 1: Using a static server with Node.js

1. Add a simple Express server to serve your static files:

// server.js
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Studio running on port ${PORT}`));

2. Update your package.json:

{
  "scripts": {
    "build": "sanity build",
    "start": "node server.js",
    "heroku-postbuild": "sanity build"
  },
  "dependencies": {
    "express": "^4.18.0"
  }
}

Option 2: Using the static buildpack

You can use the heroku-buildpack-static with a static.json configuration file. If you need to serve from a base path, set the SANITY_STUDIO_BASE_PATH environment variable.

Important Post-Deployment Step

After deploying to Heroku, you must add your Heroku URL to your Sanity project's CORS origins:

1. Go to manage.sanity.io
2. Select your project
3. Go to Settings → API
4. Add your Heroku URL (e.g., https://your-app.herokuapp.com) to the CORS origins

Without this, your Studio won't be able to communicate with Sanity's API.

Alternative: Sanity's Hosted Solution

Worth mentioning: the easiest way to deploy is using sanity deploy, which deploys to Sanity's free hosting at your-project.sanity.studio. This gives you automatic SSL, no CORS configuration hassles, and enables features like schema deployment for AI Agent Actions. You can still use Heroku for your frontend while using Sanity's hosting for the Studio!

Hope this helps! Let me know if you run into any issues. 🚀