SvelteKit via sv create

This variant hands the SvelteKit scaffold to the official sv CLI (npx sv@latest create), then layers Phoenix wiring on top. Pick this when you want to use the canonical Svelte adders — Tailwind, Drizzle, Lucia, Prettier, ESLint, Storybook — and have Tostada handle just the Phoenix backend integration.

Install

npx tostada-cli create MyApp --variant sveltekit-sv

Or interactively pick SvelteKit (via npx sv create) at the variant prompt.

What happens

1. CLI downloads the Tostada shared base (server/, Makefile, scripts/)
2. CLI runs npx sv@latest create client --no-install — you interact with sv directly to pick a template (default, demo, library) and adders (Tailwind, Lucia, Drizzle, etc.)
3. CLI applies a small Phoenix-wiring overlay into client/:
   • vite.config.ts — Phoenix proxy for /api, /socket, /users, /live, /assets
   • svelte.config.js — adapter-static outputting to ../server/priv/static/app, base path /app in production
   • src/lib/socket.ts — Phoenix socket helper
   • src/phoenix.d.ts — TypeScript types for the phoenix npm package
4. CLI adds two deps to client/package.json: @sveltejs/adapter-static, phoenix
5. CLI runs mix deps.get + npm install (unless --no-install)

What’s overlaid (what tostada owns)

The overlay only replaces files that need Phoenix-specific configuration. Everything else from sv create is yours: routes, components, styling, your picked adders.

If you used sv create’s Tailwind adder, your overlay-injected files don’t disturb it — Tailwind config, app.css, and any added routes are untouched.

Picking sv adders

When sv create prompts, you can pick any combination — Tostada doesn’t care which adders you choose. Some pairings worth noting:

• Tailwind — fine, no conflict with the Phoenix backend’s tailwind (Phoenix’s tailwind only styles server-rendered LiveView pages, which Tostada doesn’t use by default)
• Drizzle — works against the same Postgres database Phoenix uses; you’d point Drizzle at the same DATABASE_URL Phoenix configures
• Lucia — overlaps with Phoenix’s session auth. If you want client-side auth, disable Phoenix’s :require_authenticated_user plug for the /app scope
• Prettier / ESLint — no conflict

Available addons

Verifying the install

cd MyApp
make db.setup
make dev

If sv create didn’t generate a landing page (e.g., you picked the minimal template), add src/routes/+page.svelte yourself.

Caveats

• sv create is interactive — you can’t fully script this variant without piping inputs
• npm install only runs once Phoenix wiring is layered in, so @sveltejs/adapter-static and phoenix resolve correctly on first install
• If sv create picks a different SvelteKit adapter (e.g. adapter-auto), the overlay overwrites that choice with adapter-static so the Phoenix /app mount works