SvelteKit on GitHub Codespaces Port Forwarding returns 502 Bad Gateway

When trying to boot a SvelteKit project inside GitHub Codespaces your app may fail silently and show a 502 Bad Gateway error when opening in the browser.

The issue is that Vite does not listen on all addresses by default, it needs to be configured to do so. You can fix this with a temporary workaround each time or a permanent configuration change in your project.

Temporary workaround:

When running commands such as npm run dev or npm run preview add the --host flag.

npm run dev -- --host

Permanent solution:

If you’re using Codespaces frequently, you may want to skip adding a flag every time you run commands. Instead you can make your project environment-aware by adding the following to your vite.config.ts.

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [sveltekit()],

  server: {
    // Set `host: true` if inside GitHub Codespaces to listen on all addresses,
    // see https://vitejs.dev/config/server-options.html#server-host
    host: !!process.env.CODESPACES,
  },

})