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,
},
})