Framework · Seit 2020

SvelteKit

SvelteKit ist das offizielle Framework für Web-Apps mit Svelte – mit dateibasiertem Routing, Server-Rendering, Datenladen und flexiblem Deployment.

Anleitung starten Diskussionen

SvelteKit ist das offizielle Anwendungs-Framework des Svelte-Teams. Es erschien erstmals 2020 und wird als Open Source entwickelt. Es baut auf Svelte auf, das Komponenten beim Build in effizientes JavaScript kompiliert, und ergänzt Routing, serverseitiges Rendering (SSR), Datenladen, Formularverarbeitung sowie Build und Deployment; Entwicklungsserver und Bundling übernimmt Vite. Die aktuelle Svelte-Generation drückt Reaktivität mit Runes wie $state, $derived, $effect und $props aus.

Seine Stärke liegt darin, dass Sie die Rendering-Strategie pro Seite wählen. Inhalte, die für alle gleich sind, etwa Blogartikel und Dokumentation, lassen sich beim Build vorrendern; nutzerspezifische Seiten werden auf dem Server gerendert, und Ansichten, die stark auf Browser-APIs angewiesen sind, können rein clientseitig laufen. Form Actions funktionieren auch ohne JavaScript und werden progressiv erweitert. Über Adapter lässt sich derselbe Code auf einem Node.js-Server, einem statischen Hosting oder Plattformen wie Vercel, Netlify und Cloudflare bereitstellen.

Für den Einstieg legen Sie mit npx sv create ein Projekt an und arbeiten das interaktive Tutorial auf svelte.dev durch – zuerst die Svelte-Grundlagen, dann SvelteKit. Ältere Materialien zeigen oft inzwischen geänderte Syntax und Konfiguration wie export let, $lib oder svelte.config.js. Orientieren Sie sich daher an der offiziellen Dokumentation und der aktuellen Runes-Syntax.

Besonderheiten

Kompilierte Komponenten mit Runes

$state, $derived, $effect und $props machen Reaktivität explizit; der Compiler erzeugt Code, der ohne virtuelles DOM nur Geändertes aktualisiert.

Dateibasiertes Routing und Layouts

Die Ordnerstruktur von src/routes ist die URL-Struktur; +page-, +layout-, +server- und +error-Dateien definieren Seiten, Rahmen, APIs und Fehleransichten.

Rendering pro Seite wählbar

Server-Rendering, Client-Rendering oder Prerendering legen Sie für jede Seite mit den Optionen prerender, ssr und csr fest.

Load-Funktionen und Form Actions

Daten laden Sie mit automatisch typisierten Load-Funktionen und ändern sie mit Form Actions, die auch ohne JavaScript funktionieren.

Einsatzgebiete

Inhaltsseiten wie Blogs und Dokumentation
Full-Stack-Web-Apps mit Anmeldung und Datenbank
Admin-Werkzeuge und Dashboards
Marketingseiten auf statischem Hosting

Installation

1
Node.js einrichten
Die Entwicklung mit SvelteKit läuft auf Node.js. Installieren Sie eine aktuelle LTS-Version und prüfen Sie in einem neuen Terminal, ob node und npm ihre Versionen anzeigen.
```
node --version && npm --version
```
2
Projekt anlegen
Legen Sie mit sv, dem offiziellen Kommandozeilenwerkzeug, ein neues Projekt an. Dabei wählen Sie eine Vorlage, TypeScript und Erweiterungen wie Prettier, ESLint, Vitest oder Playwright.
```
npx sv create my-app
```
3
Entwicklungsserver starten
Wechseln Sie in den Projektordner, installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver. Der Browser öffnet http://localhost:5173, und Änderungen erscheinen beim Speichern.
```
cd my-app && npm install && npm run dev -- --open
```

Dein erstes Programm

Ihre erste Seite

src/routes/+page.svelte ist die Startseite (/). Die mit der Rune $state angelegte Variable count aktualisiert die Oberfläche bei jeder Änderung, und die Funktion im onclick-Attribut erhöht sie bei jedem Klick. Weitere Seiten fügen Sie über Ordner hinzu, etwa src/routes/about/+page.svelte.

src/routes/+page.svelte

<script lang="ts">
  let count = $state(0);
</script>

<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

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

Wichtige Werkzeuge

sv: Die offizielle Svelte-CLI. sv create legt Projekte an, sv add richtet Erweiterungen wie Tailwind CSS, Vitest, Playwright und Drizzle ein.
Vite: Das Build-Werkzeug hinter Entwicklungsserver und Produktions-Build. Es startet schnell, unterstützt HMR, und SvelteKit läuft als Vite-Plugin.
svelte-check: Ein Kommandozeilenwerkzeug, das Typfehler und Svelte-spezifische Probleme im ganzen Projekt meldet. Aufruf mit npm run check.
Svelte for VS Code: Die offizielle VS-Code-Erweiterung mit Syntaxhervorhebung, Autovervollständigung, Typfehleranzeige und Formatierung für .svelte-Dateien.

Schritt-für-Schritt-Anleitung

Sechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von SvelteKit.

Offizielle Dokumentation und Ressourcen

Sprachen

Diskussionen

Diskussion starten

Stelle Fragen, teile Erfahrungen und tausche Meinungen zu SvelteKit aus.

Noch keine Diskussionen. Starte die erste.