SvelteKit

Map your domain

hatch add myapp.test 5173 --https

Configure the dev server

SvelteKit uses Vite under the hood. Configure the server in vite.config.ts:

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    host: true,
    hmr: {
      host: 'myapp.test',
      protocol: 'wss',
    },
    allowedHosts: ['myapp.test'],
  },
});

Environment variables

SvelteKit uses Vite's env system. Public variables must start with PUBLIC_:

# .env
PUBLIC_APP_URL=https://myapp.test

Access with import { PUBLIC_APP_URL } from '$env/static/public'.

Server-side

SvelteKit server routes (+server.ts and +page.server.ts) run on the same port, so they work through Hatch without extra config.

Project config

# .hatch.yaml
domains:
  - domain: myapp.test
    port: 5173
    https: true