/ Artikel

Setup mit SvelteKit

Svelte- und SvelteKit-Projekt aufsetzen: Setup mit npx sv create, Vite als Build-Tool, TypeScript-Optionen, npm-Scripts (dev, build, preview), Projektstruktur und wann reines Svelte ohne SvelteKit ausreicht.

Svelte selbst ist nur die UI-Schicht — für eine vollständige Anwendung kommt SvelteKit ins Spiel: das offizielle Framework auf Svelte-Basis mit Routing, Server-Side Rendering, Form Actions und Adaptern für gängige Hosting-Umgebungen. Dieser Artikel zeigt, wie du ein neues Projekt mit dem aktuellen CLI sv create aufsetzt, was im Wizard zur Auswahl steht, wie die Projektstruktur aussieht und wann reines Svelte ohne SvelteKit genügt.

01 · Abschnitt

Voraussetzungen

Node.js 20 LTS oder neuer (Stand 2026).
Paketmanager deiner Wahl: npm, pnpm oder yarn. Für Monorepos und große Projekte oft pnpm.
Editor mit Svelte-Support — für VS Code die offizielle Extension Svelte for VS Code.

02 · Abschnitt

Neues SvelteKit-Projekt anlegen

Das offizielle CLI heißt sv. Der Befehl zum Anlegen eines Projekts ist:

bash Projekt anlegen

npx sv create my-app
cd my-app
npm install
npm run dev

Der Dev-Server läuft danach typischerweise auf http://localhost:5173.

Was der Wizard fragt

sv create ist interaktiv und fragt unter anderem:

Template: SvelteKit (Skeleton) / SvelteKit (Demo) / Library.
TypeScript: Mit Type-Checking (jsconfig.json) oder vollwertig mit TypeScript (tsconfig.json).
Add-ons: Prettier, ESLint, Vitest, Playwright, Tailwind, Storybook, Drizzle u. a.
Paketmanager: npm, pnpm oder yarn.

Empfohlene Standardauswahl für die meisten Projekte:

Template: SvelteKit (Skeleton)
TypeScript: Ja
Add-ons: Prettier, ESLint, Vitest, Playwright, Tailwind (falls gewünscht)

03 · Abschnitt

Wichtigste npm-Scripts

Das Skeleton-Setup bringt diese Scripts mit:

JSON package.json (Auszug)

{
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
    }
}

npm run dev – Entwicklungsserver mit Hot Module Replacement.
npm run build – Production-Build.
npm run preview – lokale Vorschau des Production-Builds.
npm run check – Type-Check für .svelte- und .ts-Dateien.

04 · Abschnitt

Projektstruktur

Nach dem Skeleton-Setup sieht das Projekt so aus:

text Verzeichnisstruktur

my-app/
├── src/
│   ├── lib/                # Wiederverwendbarer Code (Komponenten, Helpers)
│   │   └── index.ts
│   ├── routes/             # Filesystem-Routing
│   │   ├── +layout.svelte  # Layout für alle Routen
│   │   └── +page.svelte    # Startseite
│   ├── app.css
│   ├── app.d.ts            # globale Type-Augmentations
│   ├── app.html            # HTML-Shell
│   └── hooks.server.ts     # Server-Hooks (optional)
├── static/                 # statische Assets, direkt unter /
├── svelte.config.js        # Svelte- und SvelteKit-Konfiguration
├── vite.config.ts          # Vite-Konfiguration
├── tsconfig.json
└── package.json

Die wichtigsten Dateinamen-Konventionen in routes/:

+page.svelte – die eigentliche Seite einer Route.
+page.ts / +page.server.ts – Daten-Loader (universal vs. nur Server).
+layout.svelte – umschließendes Layout, an Kinder weitergegeben.
+server.ts – API-Endpunkt (GET, POST, …).
+error.svelte – Error-Boundary für die Route.

Tiefer dazu im Artikel SvelteKit Grundlagen.

05 · Abschnitt

Adapter wählen

SvelteKit ist hosting-agnostisch — der konkrete Output (Static Site, Node-Server, Serverless-Function) wird per Adapter gesteuert. Standardmäßig ist @sveltejs/adapter-auto aktiviert, das den Adapter zur Build-Zeit anhand der Umgebung wählt.

Manuelle Adapter-Wahl:

bash Adapter installieren

# Statische Seite
npm install -D @sveltejs/adapter-static

# Node-Server
npm install -D @sveltejs/adapter-node

# Vercel
npm install -D @sveltejs/adapter-vercel

# Cloudflare
npm install -D @sveltejs/adapter-cloudflare

In svelte.config.js wird der Adapter dann importiert und unter kit.adapter gesetzt. Mehr im Artikel SvelteKit Rendering.

06 · Abschnitt

Reines Svelte ohne SvelteKit

Wer kein Routing und keinen Server braucht — etwa für Embed-Komponenten, eine Web-Component oder einen interaktiven Teil in einer fremden HTML-Seite — kann Svelte direkt mit Vite nutzen:

bash Reines Svelte-Vite-Projekt

npm create vite@latest my-app -- --template svelte-ts
cd my-app
npm install
npm run dev

Diese Variante ist deutlich schlanker, hat aber kein eingebautes Routing und kein SSR. Für Einzelseiten, Visualisierungen oder Komponenten-Bibliotheken passt das gut.

07 · Abschnitt

Empfehlung

Für vollwertige Web-Anwendungen mit Routing und SEO: SvelteKit. Für eingebettete Komponenten und reine SPAs: Svelte mit Vite. Eine Komponenten-Library publiziert man am besten mit dem Library-Template aus sv create.

08 · Abschnitt

Häufige Stolperfallen beim Setup

npx sv mit altem Cache. Wenn npx eine alte sv-Version verwendet, hilft npx sv@latest create my-app.

Falsche Node-Version. SvelteKit erwartet eine aktuelle Node-LTS. Bei engine-Warnungen den Node-Manager (nvm, fnm, volta) auf 20+ stellen.

adapter-auto in CI. In einigen CI-Umgebungen kann adapter-auto keinen passenden Adapter erkennen. Dann besser explizit z. B. @sveltejs/adapter-node setzen.

Tailwind nachträglich hinzufügen. Mit npx sv add tailwindcss ergänzt der CLI die Konfiguration sauber statt händisch zu basteln. Vermeidet aber Tailwind, wenn es geht - meine persönliche Meinung.