# Projektsetup mit SvelteKit

SvelteKit ist das offizielle Meta-Framework rund um Svelte. Es bringt alles mit, was moderne Webentwicklung braucht: Dateibasiertes Routing, SSR, API-Routen, Layouts, und eine cleane DX. In diesem Artikel wird Schritt für Schritt erklärt, wie man ein neues Projekt mit <span class="s1">SvelteKit</span> aufsetzt. Dabei werden die Optionen der SvelteKit CLI beleuchtet und sinnvolle Add-ons wie <span class="s1">**TailwindCSS**</span>, <span class="s1">**Prettier**</span>, <span class="s1">**ESLint**</span> sowie der passende <span class="s1">**Adapter**</span> für das Deployment ausgewählt.

#### Voraussetzungen

- Node.js (empfohlen: aktuelle LTS-Version)
- Ein Terminal (z. B. iTerm2, VS Code Terminal)
- Paketmanager, Vorzugsweise <span class="s1">NPM</span>

#### <span class="s1">Projekt erstellen</span>

Initialisiert wird das Projekt mit folgendem Befehl:

```
npx sv create my-sveltekit-project
```

`my-sveltekit-project` kann dabei durch einen beliebigen Projektnahmen ersetzt werden. `npx` muss ggf. je nach verwendetem Package-Manager angepasst werden.

Bei erstmaliger Ausführung wird das CLI-Paket automatisch installiert. Bestätigung erfolgt mit <span class="s1">y</span>.

```
Need to install the following packages:
sv@0.8.1
Ok to proceed? (y) y
```

#### SvelteKit CLI: Optionen im Überblick

Nun wird das Projekt interaktiv konfiguriert.

##### 1. Template-Auswahl

```
Which template would you like?
❯ SvelteKit minimal (barebones scaffolding for your new app)
  SvelteKit demo
  Svelte library
```

- <span class="s1">**SvelteKit minimal**</span>: Reduziertes Grundgerüst für ein eigenes Projekt ohne Beispielcode.
- <span class="s1">**SvelteKit demo**</span>: Enthält Beispielseiten und eine Beispielnavigation.
- <span class="s1">**Svelte library**</span>: Template zur Entwicklung wiederverwendbarer Svelte-Komponenten.

Wir wählen für diese Demonstration SvelteKit minimal.

##### 2. TypeScript-Unterstützung

```
Add type checking with TypeScript?
❯ Yes, using TypeScript syntax
  Yes, using JavaScript with JSDoc comments
  No
```

Empfohlen wird die Verwendung der TypeScript-Syntax, um statische Typüberprüfung und IntelliSense zu nutzen.

##### 3. Erweiterungen im Projektsetup

Nach der Projekterstellung fragt das CLI nach zusätzlichen Tools und Bibliotheken, die dem Projekt hinzugefügt werden sollen. Die Auswahl erfolgt interaktiv über die Leertaste (Mehrfachauswahl möglich). Die Optionen sind:

```
What would you like to add to your project?
❒ prettier          (formatter – https://prettier.io)
❒ eslint            (linter – https://eslint.org)
❒ vitest            (unit testing – https://vitest.dev)
❒ playwright        (e2e testing – https://playwright.dev)
❒ tailwindcss       (CSS utility framework – https://tailwindcss.com)
❒ sveltekit-adapter (adapter for deployment – https://kit.svelte.dev/docs#adapters)
❒ drizzle           (ORM – https://orm.drizzle.team/)
❒ lucia             (auth – https://lucia-auth.com)
❒ mdsvex            (Markdown + Svelte – https://mdsvex.pngwn.io/)
❒ paraglide         (i18n – https://paraglide.dev/)
❒ storybook         (component explorer – https://storybook.js.org)
```

<table id="bkmrk-erweiterung-beschrei"><thead><tr><th>**Erweiterung**

</th><th>**Beschreibung**

</th><th>**Einsatzzweck**

</th></tr></thead><tbody><tr><td>**Prettier**

</td><td>Automatisches Codeformatierungs-Tool. Definiert einheitlichen Stil für z. B. Einrückung, Semikolons.

</td><td>Formatierung &amp; Clean Code

</td></tr><tr><td>**ESLint**

</td><td>Linter zur statischen Analyse von JavaScript/TypeScript-Code. Findet potenzielle Fehler &amp; Stilprobleme.

</td><td>Codequalität und Fehlervorbeugung

</td></tr><tr><td>**Vitest**

</td><td>Schnelles Unit-Testing-Framework, optimiert für Vite und moderne Frontends.

</td><td>Komponententests, Logiktests

</td></tr><tr><td>**Playwright**

</td><td>Framework für End-to-End-Tests. Ermöglicht UI-Tests mit echten Browserinstanzen.

</td><td>Testen von Userflows &amp; Accessibility

</td></tr><tr><td>**TailwindCSS**

</td><td>Utility-first CSS-Framework für schnelles und responsives Styling.

</td><td>Styling über Utility-Klassen

</td></tr><tr><td>**SvelteKit Adapter**

</td><td>Bindeglied zwischen dem Framework und der Zielplattform (z. B. statisches HTML, SSR, Vercel etc.).

</td><td>Deployment-Anpassung

</td></tr><tr><td>**Drizzle**

</td><td>TypeScript-ORM für SQL-Datenbanken mit gutem DX.

</td><td>Datenbankzugriff (PostgreSQL etc.)

</td></tr><tr><td>**Lucia**

</td><td>Authentifizierungs-Framework mit Fokus auf Einfachheit und Sicherheit.

</td><td>Login-Mechanismen, Zugriffskontrolle

</td></tr><tr><td>**mdsvex**

</td><td>Markdown-Präprozessor für Svelte-Komponenten. Kombination von Markdown und Svelte möglich.

</td><td>Content Management, Dokusysteme

</td></tr><tr><td>**Paraglide**

</td><td>Internationalisierungs-Tool mit Compile-Time-Optimierung.

</td><td>Mehrsprachigkeit (i18n)

</td></tr><tr><td>**Storybook**

</td><td>Tool zur Visualisierung und Dokumentation einzelner UI-Komponenten.

</td><td>Komponentenkatalog &amp; Dokumentation

</td></tr></tbody></table>

In diesem Beispiel wählen wir: prettier, eslint, tailwindcss, sveltekit-adapter

##### 4. TailwindCSS Plugins

Wir haben uns im Schritt zuvor entschieden, <span class="s1">**TailwindCSS**</span> in das Projekt einzubinden. TailwindCSS ist ein Utility-first CSS-Framework, das die Gestaltung von Benutzeroberflächen durch vorgefertigte CSS-Klassen stark vereinfacht. Nach Auswahl von <span class="s1">tailwindcss</span> im Add-on-Menü wird abgefragt, welche <span class="s2">**Plugins**</span> integriert werden sollen:

```
tailwindcss: Which plugins would you like to add?
❒ typography (@tailwindcss/typography)
❒ forms     (@tailwindcss/forms)
```

<table id="bkmrk-plugin-beschreibung-" style="width: 100%;"><thead><tr><th style="width: 12.7537%;">**Plugin**

</th><th style="width: 87.2463%;">**Beschreibung**

</th></tr></thead><tbody><tr><td style="width: 12.7537%;">**Typography**

</td><td style="width: 87.2463%;">Stellt sinnvolle Standard-Styles für typografische Inhalte bereit. Eignet sich besonders für Content-lastige Seiten, z. B. Dokumentation oder Blogbeiträge.

</td></tr><tr><td style="width: 12.7537%;">**Forms**

</td><td style="width: 87.2463%;">Vereinheitlicht das Styling von nativen HTML-Formular-Elementen wie <span class="s1">input</span>, <span class="s1">select</span>, <span class="s1">textarea</span> etc. Passt sich automatisch an das Tailwind-Designsystem an.

</td></tr></tbody></table>

Wir wählen beide Plugins aus.

##### 5. Auswahl des SvelteKit Adapters

SvelteKit ist ein Meta-Framework, das Applikationen sowohl statisch als auch serverseitig oder als Hybrid generieren kann. <span class="s1">**Adapter**</span> übernehmen dabei die Aufgabe, die Anwendung für eine bestimmte Zielplattform aufzubereiten (z. B. als statische HTML-Seiten oder als Server-Handler für Vercel, Netlify, Node.js etc.).

Die Auswahl erfolgt im CLI nach Aktivierung des Add-ons `<span class="s1">sveltekit-adapter</span>`:

```
sveltekit-adapter: Which SvelteKit adapter would you like to use?
  auto
  node
❯ static (@sveltejs/adapter-static)
  vercel
  cloudflare-pages
  netlify
```

<table id="bkmrk-adapter-beschreibung"><thead><tr><th>**Adapter**

</th><th>**Beschreibung**

</th><th>**Typ**

</th><th>**Empfohlene Einsatzzwecke**

</th></tr></thead><tbody><tr><td>**auto**

</td><td>Automatische Auswahl anhand der Umgebung. Praktisch für Entwicklung, aber nicht für produktives Deployment empfohlen.

</td><td>auto-detect

</td><td>Nur lokale Nutzung, z. B. für Tests

</td></tr><tr><td>**node**

</td><td>Erstellt ein Node.js-Handler zur Laufzeit, z. B. für Express, Fastify oder Cloud-Server.

</td><td>SSR

</td><td>Eigener Serverbetrieb, z. B. VPS, Docker-Container

</td></tr><tr><td>**static**

</td><td>Exportiert alle Seiten als HTML/CSS/JS. Kein dynamisches Routing, aber sehr performant.

</td><td>SSG (Static Site)

</td><td>GitHub Pages, Netlify, klassische Webserver

</td></tr><tr><td>**vercel**

</td><td>Optimierung für das Vercel-Ökosystem. Deployment erfolgt über Vercel CLI oder GitHub-Integration.

</td><td>Edge-/SSR-ready

</td><td>Hosting über [vercel.com](https://vercel.com)

</td></tr><tr><td>**cloudflare-pages**

</td><td>Unterstützung für Cloudflare Pages, inkl. Worker-Skripte.

</td><td>Edge SSR

</td><td>Deployment auf [pages.cloudflare.com](https://pages.cloudflare.com)

</td></tr><tr><td>**netlify**

</td><td>Adapter mit Funktionen wie Functions, Redirects, SSR via Netlify.

</td><td>Hybrid

</td><td>Deployment auf [netlify.com](https://www.netlify.com)

</td></tr></tbody></table>

Für unser Beispiel wählen wir `static`.

##### 6. Wahl des Paketmanagers

```
Which package manager do you want to install dependencies with?
❯ npm
  yarn
  pnpm
  bun
  deno
```

Die Auswahl erfolgt entsprechend der individuellen Präferenz. `<span class="s1">npm</span>` ist in den meisten Fällen ausreichend.

##### 7. Nächste Schritte nach dem Setup

Nach erfolgreichem Setup wird vom CLI folgender Ablauf vorgeschlagen:

```
cd my-sveltekit-project
git init && git add -A && git commit -m "Initial commit"   # optional
npm run dev -- --open
```

Damit wird der lokale Entwicklungsserver gestartet. Der Zugriff erfolgt typischerweise unter <span class="s1">[http://localhost:5173](http://localhost:5173)</span>.

#### Projektstruktur nach dem Setup

Nach erfolgreichem Setup mit der SvelteKit CLI liegt eine vorstrukturierte Projektbasis vor. Diese Struktur ermöglicht den sofortigen Einstieg in die Anwendungsentwicklung, getrennt nach Konfiguration, Komponenten, Routen und Styling.

Ein typisches Grundgerüst (vereinfacht dargestellt):

```
my-sveltekit-project/
├── src/
│   ├── lib/
│   │   └── components/     ← Wiederverwendbare UI-Komponenten
│   ├── routes/             ← Seitenstruktur (basierend auf Datei-Routing)
│   │   └── +page.svelte    ← Startseite (Route: "/")
│   └── app.css             ← TailwindCSS-Einstiegspunkt
├── static/                 ← Öffentliche Assets (z. B. Bilder, favicon)
├── svelte.config.js        ← Zentrale SvelteKit-Konfiguration
├── tailwind.config.cjs     ← TailwindCSS-Konfiguration
├── postcss.config.cjs      ← PostCSS-Integration für Tailwind
├── tsconfig.json           ← TypeScript-Projektdefinition
├── package.json            ← Abhängigkeiten und Skripte
└── vite.config.js          ← Build-Tool-Konfiguration (Vite)
```

<table id="bkmrk-pfad-beschreibung-sr" style="width: 100%;"><thead><tr><th style="width: 25.6189%;">**Pfad**

</th><th style="width: 74.3811%;">**Beschreibung**

</th></tr></thead><tbody><tr><td style="width: 25.6189%;">src/routes/

</td><td style="width: 74.3811%;">Implementierung der Seitenstruktur der Anwendung. Jede Datei oder jeder Ordner stellt eine Route dar.

</td></tr><tr><td style="width: 25.6189%;">src/routes/+page.svelte

</td><td style="width: 74.3811%;">Einstiegspunkt der Anwendung (Startseite, Route <span class="s1">/</span>). Kann sofort bearbeitet werden.

</td></tr><tr><td style="width: 25.6189%;">src/lib/

</td><td style="width: 74.3811%;">Globale Hilfsmittel, z. B. Komponenten, Stores, Services. Nicht Routen-spezifisch.

</td></tr><tr><td style="width: 25.6189%;">src/app.css

</td><td style="width: 74.3811%;">Haupt-Stylesheet. Hier wird TailwindCSS eingebunden (<span class="s1">@tailwind base</span>, <span class="s1">components</span>, <span class="s1">utilities</span>).

</td></tr><tr><td style="width: 25.6189%;">static/

</td><td style="width: 74.3811%;">Enthält öffentlich zugängliche Dateien (z. B. <span class="s1">robots.txt</span>, <span class="s1">favicon.ico</span>, statische Bilder).

</td></tr><tr><td style="width: 25.6189%;">svelte.config.js

</td><td style="width: 74.3811%;">Konfiguriert Adapter, Preprocessing, Pfade etc.

</td></tr><tr><td style="width: 25.6189%;">tailwind.config.cjs

</td><td style="width: 74.3811%;">Definiert Tailwind-Themes, Plugins und Pfade zur Content-Erkennung.

</td></tr><tr><td style="width: 25.6189%;">tsconfig.json

</td><td style="width: 74.3811%;">Konfiguriert das Verhalten des TypeScript-Compilers.

</td></tr></tbody></table>