ddev-laravel-breeze-sveltekit

Monorepo for Laravel Breeze with API-only stack (PHP) + SvelteKit (NodeJS), both within DDEV.

Fork of lindgr3n/breeze-sveltekit.

• Frontend: https://frontend.ddev-laravel-breeze-sveltekit.ddev.site/ (frontend/-folder)
• Backend: https://ddev-laravel-breeze-sveltekit.ddev.site/

Trick is the nginx conf in .ddev/nginx_full/frontend.conf and additional hostname in .ddev/config.yaml, based on https://www.lullabot.com/articles/nodejs-development-ddev.

⚠️ Use with caution / no warranty. This is an experiment / prototype, check security before using this on production ⚠️

Local setup

First time setup steps:

ddev start
ddev composer install
ddev artisan key:generate
ddev artisan migrate

cd frontend
ddev npm install

ddev ssh
cd frontend/
cp .env.example .env
exit

After first install:

cd frontend
ddev npm run dev

Open https://frontend-breeze-sveltekit.ddev.site.ddev.site/, happy development!

Troubleshooting

• Check FRONTEND_URL in .env (see usage in config/sanctum.php) + origin for Vite in frontend/ needs to be correct for API auth, otherwise there will be "CATCHED USER ERROR Unauthorized" errors
• Always use ddev npm ... - never run npm ... only on host computer - make sure you're in frontend/

Deployment

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.

• Add tutorial for example .env values --> is ORIGIN & CSRF okay on production/live?

How was this created?

1. Install Laravel and Breeze via DDEV quickstart documentation

ddev config --project-type=laravel --docroot=public
ddev start

# Install Laravel
ddev composer create --prefer-dist laravel/laravel:^11

# Install Laravel Breeze
ddev composer require laravel/breeze --dev

# Run breeze installer
# - Select API only stack (!)
# - Selected pest for testing framework
# - Select 'yes' for "run pending migrations?" (!)
ddev artisan breeze:install

2. Install SvelteKit

# Install SvelteKit
# - Selected: skeleton, yes, with JSDoc comments; eslint, prettier, playwright, vitest
ddev npm create svelte@latest frontend

cd frontend
ddev npm install

3. Add nginx reverse proxy for SvelteKit

Created .ddev/nginx_full/frontend.conf with:

# 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 frontend.ddev-laravel-breeze-sveltekit.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;
}

Thanks to Andy Blum for https://www.lullabot.com/articles/nodejs-development-ddev.

Also added

additional_hostnames:
    - frontend.ddev-laravel-breeze-sveltekit

to .ddev/config.yaml.

Both changes ddev restart afterwards.

4. Forked lindgr3n/breeze-sveltekit

Copy routes, lib/, app.d.ts and styles from lindgr3n/breeze-sveltekit and install deps:

cd frontend/
ddev npm i axios
ddev npm i -D typescript

5. Added tailwind

cd frontend
ddev npm install -D tailwindcss postcss autoprefixer

ddev ssh
cd frontend
npx tailwindcss init -p
exit

ddev npm install -D sass

See https://tailwindcss.com/docs/guides/sveltekit for all steps.

6. Add cookie

cd frontend
ddev npm install cookie