SvelteKit Local Dev

Develop a SvelteKit app locally while using remote OAuth, database, and services.

Goal

Local SvelteKit dev server at localhost:5173
Accessible via production domain app.example.com
Connected to remote PostgreSQL database
OAuth callbacks work correctly

Prerequisites

Deployed infrastructure with auth service and database
Dev proxy set up: slipp bootstrap proxy myserver --email admin@example.com
Vault secrets configured

Setup

Create run profile

slipp run dev \
  --cmd "npm run dev" \
  --tunnel-out 5173:app.example.com@myserver \
  --tunnel-in postgres:5432@myserver \
  --vault myproject

Configure environment

Your .env.local should reference localhost for tunneled services:
.env.local
```
DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
PUBLIC_APP_URL=https://app.example.com
```
Run development
Terminal window
```
slipp run dev
```

How It Works

sequenceDiagram
    participant Browser
    participant Caddy as VPS Caddy
    participant TunnelOut as SSH Tunnel (out)
    participant Dev as SvelteKit Dev
    participant TunnelIn as SSH Tunnel (in)
    participant DB as Remote PostgreSQL

    Browser->>Caddy: app.example.com
    Caddy->>TunnelOut: Route to tunnel
    TunnelOut->>Dev: localhost:5173
    Dev->>TunnelIn: localhost:5432
    TunnelIn->>DB: Query
    DB-->>Browser: Response

OAuth Callbacks

Since your app is accessible at the production domain:

OAuth provider redirects to https://app.example.com/auth/callback
Request tunnels to your local server
Session is established locally
Refresh and it works!

No need to configure localhost callback URLs.

Database Migrations

Run migrations against remote database:

# With tunnel active
npx prisma migrate deploy

# Or Drizzle
npm run db:push

Multiple Developers

Each developer needs their own domain:

# Developer 1
slipp run dev --tunnel-out 5173:alice.app.example.com@myserver

# Developer 2
slipp run dev --tunnel-out 5173:bob.app.example.com@myserver

Configure DNS wildcards or separate A records.