Simple demo for running SvelteKit with a PostgreSQL database - fully containerized within Docker via DDEV. Access to database in SvelteKit is done via drizzle ORM.
Huge thanks to Andy Blum for providing the guide Node.js Development with DDEV.
Status: 🚧 Work in Progress 🚧
First, install DDEV on your local computer.
Afterwards, git clone this repository to your local computer and execute the following commands in the project folder:
cd ddev-sveltekit-postgres/
ddev start
ddev npm install
ddev exec 'cp .env.example .env'
# initial database setup via drizzle
ddev npm run generate
ddev npm run migrate
These steps are only need to be done for the first time. Afterwards you can just use ddev start
and ddev npm run dev
to access your app https://sveltekit-app.ddev-sveltekit-postgres.ddev.site/ (see below).
ddev start
# open site in browser
ddev launch
# run this to start Vite dev server, reload browser afterwards:
ddev npm run dev
The app is now running on https://app.ddev-sveltekit-postgres.ddev.site/, happy developing! 🎉
View the database via ddev tableplus
(drizzle Studio not yet implemented - needs port expose, etc.). You can add a test row there.
See .ddev/config.yaml
for configuring database type and NodeJS version. Changes need a ddev restart
afterwards.
This setup should be easily self-hostable via Coolify (or other tools like CapRover, ploi.io, Laravel Forge, etc.). See this guide for example: Deploy Node.js applications on a VPS using Coolify.
I'm currently working on own blog articles about it (could take some time)
Thanks very much to ...
Adapted the steps of https://www.lullabot.com/articles/nodejs-development-ddev:
# create a new .ddev/config.yaml
ddev config --nodejs-version=20.12.1 --database=postgres:16
# start the local project
ddev start
# Create a new SvelteKit skeleton project
# selected: skeleton project, JavaScript with JSDoc, ESLint + Prettier + Playwright + Vitest
ddev npm create svelte@latest .
# install dependencies
ddev npm install
Add additional hostname in .ddev/config.yaml:
additional_hostnames:
- 'sveltekit-app.ddev-sveltekit-postgres'
Ran ddev restart
to apply those changes.
Add a new nginx conf .ddev/nginx_full/sveltekit-app.conf
:
# important, otherwise nginx fails with "[emerg] could not build server_names_hash,
# you should increase server_names_hash_bucket_size: 64"
server_names_hash_bucket_size 128;
server {
server_name sveltekit-app.ddev-sveltekit-postgres.ddev.site;
location / {
proxy_pass http://localhost:5173;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
listen 80;
listen 443 ssl;
ssl_certificate /etc/ssl/certs/master.crt;
ssl_certificate_key /etc/ssl/certs/master.key;
include /etc/nginx/monitoring.conf;
error_log /dev/stdout info;
access_log /var/log/nginx/access.log;
include /etc/nginx/common.d/*.conf;
include /mnt/ddev_config/nginx/*.conf;
}
Ran ddev restart
to apply those changes.
Because my domain name was first rather long, I ran into
nginx: [emerg] could not build server_names_hash, you should increase server_names_hash_bucket_size: 64
For now I shortened it till I find out how to customize etc/nginx/nginx.conf
/ report the issue to DDEV.
Ran ddev restart
to apply those changes.
Install dependecies (via https://medium.com/@anasmohammed361/drizzle-orm-with-sveltekit-8aecbc8cc39d):
# https://orm.drizzle.team/drizzle-studio/overview#quick-start + others:
ddev npm i drizzle-orm
ddev npm i -D drizzle-kit dotenv pg
ddev npm i postgres
Created schema via following https://medium.com/@anasmohammed361/drizzle-orm-with-sveltekit-8aecbc8cc39d. Added config files and scripts to package.json. Afterwards connection to db should be possible:
# Run Schema Generation
ddev npm run generate
# Push the Schema changes to Db
ddev npm run migrate
Added a row to the table via TablePlus and saved it via CMD+S for test purposes.
ddev tableplus