Sanity dev server not loading in GitHub Codespaces - port forwarding issue

You're absolutely right that this is related to how GitHub Codespaces handles port forwarding! This is a common issue when running Sanity Studio (which uses Vite) in Codespaces.

The problem occurs because the dev server binds to localhost by default, which doesn't work well with Codespaces' port forwarding mechanism. Here are the solutions:

Quick Fix: Bind to 0.0.0.0

Modify your dev command to bind to all network interfaces:

sanity dev --host 0.0.0.0

Or update your package.json:

{
  "scripts": {
    "dev": "sanity dev --host 0.0.0.0"
  }
}

Advanced Fix: Configure Vite for Codespaces

For a more robust solution, create or update your sanity.cli.ts file to configure Vite's server and HMR (Hot Module Replacement) settings:

import {defineCliConfig} from 'sanity/cli'
import {type UserConfig} from 'vite'

export default defineCliConfig({
  vite(viteConfig: UserConfig): UserConfig {
    return {
      ...viteConfig,
      server: {
        ...viteConfig.server,
        host: '0.0.0.0',
        hmr: {
          clientPort: 443,
          host: process.env.CODESPACE_NAME 
            ? `${process.env.CODESPACE_NAME}-3333.app.github.dev` 
            : 'localhost'
        }
      }
    }
  }
})

This configuration:

• Binds the server to 0.0.0.0 so it accepts connections from Codespaces' proxy
• Sets the HMR client port to 443 (HTTPS)
• Uses Codespaces environment variables to construct the correct forwarded URL (format: {codespace-name}-{port}.app.github.dev)

Why This Happens

Sanity Studio uses Vite as its build tooling, and Vite's dev server needs to be accessible through Codespaces' port forwarding system. By default, it only listens on localhost, which isn't accessible through the forwarded ports. The --host 0.0.0.0 flag tells Vite to listen on all network interfaces, making it accessible through Codespaces' proxy.

The HMR configuration is important because without it, hot module replacement might try to connect to the wrong URL, causing the infinite loading you're experiencing.

Additional Tips

• Make sure Codespaces has port 3333 set to "Public" visibility in the Ports panel if you're still having issues
• You can also configure this in a .devcontainer/devcontainer.json file with "forwardPorts": [3333]
• After making these changes, you should see the forwarded URL in Codespaces' Ports panel that you can click to access your Studio

The --host 0.0.0.0 flag is usually sufficient for most cases, but the full Vite configuration ensures HMR works properly too!