docker.recipes

SvelteKit + PostgreSQL

intermediate

SvelteKit full-stack framework with PostgreSQL database.

Overview

SvelteKit is a modern full-stack framework built on Svelte that provides server-side rendering, static site generation, and single-page application capabilities with file-based routing and built-in performance optimizations. Born from the Svelte ecosystem, SvelteKit offers a compile-time approach that eliminates virtual DOM overhead while providing a complete application framework with TypeScript support, form actions, and universal load functions for data fetching. This stack combines SvelteKit's lightning-fast frontend compilation and flexible rendering modes with PostgreSQL's robust ACID-compliant database engine, creating a powerful foundation for data-driven applications. PostgreSQL's advanced JSON support complements SvelteKit's modern JavaScript architecture, while its mature transaction system ensures data integrity for complex business logic handled through SvelteKit's server-side form actions and API routes. Developers building modern web applications that require both high performance and data reliability should consider this stack, particularly when handling complex relational data, user authentication systems, or applications requiring real-time features with PostgreSQL's LISTEN/NOTIFY functionality alongside SvelteKit's WebSocket support.

Key Features

  • File-based routing system with automatic code splitting and lazy loading
  • Server-side rendering with hydration and static site generation capabilities
  • Form actions for type-safe server-side mutations without JavaScript
  • Universal load functions for data fetching with automatic serialization
  • PostgreSQL ACID compliance with advanced transaction support for data integrity
  • JSON/JSONB support for hybrid relational-document data models
  • Full-text search with ranking and highlighting capabilities
  • Hot module replacement in development with instant page updates

Common Use Cases

  • 1E-commerce platforms requiring complex product catalogs with inventory management
  • 2Content management systems with hierarchical data and full-text search
  • 3SaaS applications needing multi-tenant data isolation and user management
  • 4Real-time dashboards combining PostgreSQL analytics with SvelteKit's reactive updates
  • 5Progressive web applications requiring offline-first capabilities with database sync
  • 6API-driven applications with server-side form validation and database persistence
  • 7Documentation sites with dynamic content pulled from PostgreSQL CMS backends

Prerequisites

  • Docker and Docker Compose installed with at least 1GB RAM available
  • Node.js knowledge for SvelteKit development and package management
  • Basic SQL understanding for PostgreSQL database schema design
  • Port 3000 available for SvelteKit development server access
  • Understanding of environment variables for database connection configuration
  • Familiarity with either Prisma, Drizzle, or Kysely for database ORM integration

For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

docker-compose.yml

docker-compose.yml
1services:
2 sveltekit:
3 build: .
4 container_name: sveltekit
5 environment:
6 DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
7 ports:
8 - "3000:3000"
9 depends_on:
10 - postgres
11 networks:
12 - svelte-network
13
14 postgres:
15 image: postgres:16-alpine
16 environment:
17 POSTGRES_DB: ${DB_NAME}
18 POSTGRES_USER: ${DB_USER}
19 POSTGRES_PASSWORD: ${DB_PASSWORD}
20 volumes:
21 - postgres_data:/var/lib/postgresql/data
22 networks:
23 - svelte-network
24
25volumes:
26 postgres_data:
27
28networks:
29 svelte-network:
30 driver: bridge

.env Template

.env
1DB_NAME=sveltekit
2DB_USER=sveltekit
3DB_PASSWORD=changeme

Usage Notes

  1. 1Docs: https://kit.svelte.dev/docs
  2. 2Access at http://localhost:3000
  3. 3File-based routing in src/routes/
  4. 4SSR, SSG, SPA modes available
  5. 5Form actions for server-side mutations
  6. 6Use Prisma, Drizzle, or Kysely for database

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

sveltekit
sveltekit:
  build: .
  container_name: sveltekit
  environment:
    DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
  ports:
    - "3000:3000"
  depends_on:
    - postgres
  networks:
    - svelte-network
postgres
postgres:
  image: postgres:16-alpine
  environment:
    POSTGRES_DB: ${DB_NAME}
    POSTGRES_USER: ${DB_USER}
    POSTGRES_PASSWORD: ${DB_PASSWORD}
  volumes:
    - postgres_data:/var/lib/postgresql/data
  networks:
    - svelte-network

Quick Start

terminal
1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4 sveltekit:
5 build: .
6 container_name: sveltekit
7 environment:
8 DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
9 ports:
10 - "3000:3000"
11 depends_on:
12 - postgres
13 networks:
14 - svelte-network
15
16 postgres:
17 image: postgres:16-alpine
18 environment:
19 POSTGRES_DB: ${DB_NAME}
20 POSTGRES_USER: ${DB_USER}
21 POSTGRES_PASSWORD: ${DB_PASSWORD}
22 volumes:
23 - postgres_data:/var/lib/postgresql/data
24 networks:
25 - svelte-network
26
27volumes:
28 postgres_data:
29
30networks:
31 svelte-network:
32 driver: bridge
33EOF
34
35# 2. Create the .env file
36cat > .env << 'EOF'
37DB_NAME=sveltekit
38DB_USER=sveltekit
39DB_PASSWORD=changeme
40EOF
41
42# 3. Start the services
43docker compose up -d
44
45# 4. View logs
46docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

terminal
1curl -fsSL https://docker.recipes/api/recipes/sveltekit-postgres/run | bash

Troubleshooting

  • SvelteKit build fails with memory errors: Increase Docker container memory limits or add NODE_OPTIONS='--max-old-space-size=4096' environment variable
  • Database connection refused on startup: Ensure PostgreSQL container starts before SvelteKit by adding health checks to depends_on configuration
  • Form actions return 403 CSRF errors: Configure SvelteKit's CSRF protection settings in app.html or disable for development with csrf.disable option
  • Hot reload not working in development: Mount src directory as volume and ensure file watchers work with Docker using CHOKIDAR_USEPOLLING=true
  • PostgreSQL data persists after container removal: Remove postgres_data volume explicitly with docker-compose down -v command
  • SvelteKit adapter errors in production: Configure appropriate adapter for deployment target in svelte.config.js and rebuild container

Community Notes

Loading...
Loading notes...

Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license

Ad Space