S SvelteKurs
M0 · Einstieg

Projekt aufsetzen

Vom leeren Ordner zum laufenden Dev-Server: das offizielle sv-CLI, die wichtigsten Optionen und was Vite dabei für dich erledigt.

Das offizielle CLI: sv create

Ein neues SvelteKit-Projekt startest du mit dem offiziellen Kommandozeilen-Tool sv. Du musst nichts global installieren — npx lädt das CLI bei Bedarf und führt es direkt aus.

bash 
# Neues Projekt anlegen (sv = das offizielle Svelte-CLI)
npx sv create meinprojekt

# In den Projektordner wechseln und Abhängigkeiten installieren
cd meinprojekt
npm install

# Entwicklungsserver starten
npm run dev

Nach sv create beantwortest du ein paar interaktive Fragen. Danach installiert npm install die Abhängigkeiten und npm run dev startet den Entwicklungsserver. Das war's — drei Befehle bis zur laufenden App.

🛤️ Rails-Vergleich: sv create ≈ rails new

sv create ist das Gegenstück zu rails new. Beide legen ein vollständiges Projektgerüst mit Konfiguration und Abhängigkeitsdatei an (package.json statt Gemfile). Der große Unterschied: SvelteKit fragt dich interaktiv, welche Bausteine du haben willst, statt alles über Flags wie --database=postgresql zu steuern.

Zum Vergleich: Rails bash 
# Rails: ein Generator legt Struktur, Config und Gemfile an
rails new meinprojekt --database=postgresql
cd meinprojekt
bundle install
bin/rails server   # startet Puma auf http://localhost:3000

Die Fragen im Assistenten

Der Assistent führt dich durch drei Entscheidungen. So sieht das im Terminal ungefähr aus:

sv create — interaktiv bash 
┌  Welcome to the Svelte CLI! (v0.6.x)
│
◇  Which template would you like?
│  ● SvelteKit minimal   (leeres Grundgerüst — ideal zum Lernen)
│  ○ SvelteKit demo      (Beispiel-App mit Demo-Seiten)
│  ○ Svelte library      (wiederverwendbare Komponenten-Bibliothek)
│
◇  Add type checking with TypeScript?
│  ● Yes, using TypeScript syntax
│  ○ Yes, using JavaScript with JSDoc comments
│  ○ No
│
◇  What would you like to add to your project? (Leertaste zum Auswählen)
│  ◻ prettier    (Code-Formatierung)
│  ◻ eslint      (Linting)
│  ◻ vitest      (Unit-Tests)
│  ◻ playwright  (End-to-End-Tests)
│  ◻ tailwindcss (Utility-CSS)
│  ◻ drizzle     (Datenbank-ORM)
└

Was die Optionen bedeuten:

  • Template: Wähle SvelteKit minimal — ein leeres Grundgerüst ohne Ballast, perfekt zum Lernen. demo bringt eine Beispiel-App mit, library ist für wiederverwendbare Komponenten-Pakete gedacht.
  • TypeScript: Sag Yes, using TypeScript syntax. Dieser Kurs setzt durchgehend <script lang="ts"> voraus, und Typsicherheit erspart dir später viele Fehler.
  • Add-ons: Optionale Extras, die du mit der Leertaste an- und abwählst. prettier und eslint sind fast immer sinnvoll; tailwindcss und drizzle brauchen wir später im Praxis-Modul.

💡 Nachträglich hinzufügen

Du musst dich jetzt nicht festlegen. Add-ons lassen sich später jederzeit mit npx sv add tailwindcss (oder einem anderen Namen) nachrüsten — das CLI passt dabei auch gleich die Konfiguration an.

npm run dev und der Dev-Server

Nach der Installation startest du mit npm run dev den Entwicklungsserver. Er läuft standardmäßig auf http://localhost:5173:

npm run dev bash 
> meinprojekt@0.0.1 dev
> vite dev

  VITE v6.0.0  ready in 412 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Öffne die Adresse im Browser, und du siehst deine App. Änderst du jetzt eine Datei und speicherst, aktualisiert sich die Seite sofort — meist sogar ohne den Zustand zu verlieren. Diesen Komfort verdankst du Vite.

Was ist Vite?

Vite ist das Build-Tool und der Entwicklungsserver unter der Haube von SvelteKit. Im Dev-Modus liefert es deine Module nativ als ES-Module aus und lädt nur das nach, was der Browser gerade wirklich anfragt — deshalb startet der Server in Millisekunden und Änderungen erscheinen praktisch verzögerungsfrei (Hot Module Replacement, HMR). Für den Produktions-Build bündelt und optimiert Vite deinen Code.

🛤️ Rails-Vergleich: Vite statt Puma + Asset-Pipeline

Vite vereint zwei Rollen, die du aus Rails getrennt kennst: Es ist zugleich der lokale Server (wie bin/rails server mit Puma) und die Asset-Verarbeitung (wie Sprockets bzw. jsbundling). Der Reload nach dem Speichern entspricht in etwa dem, was bin/dev mit Live-Reload macht — nur granularer und schneller.

Adapter: ein Ausblick

Wenn deine App produktiv gehen soll, führst du npm run build aus. Wohin dieser Build zielt — ein Node-Server, eine statische Seite, eine Serverless-Plattform — bestimmt ein Adapter. Er steckt in svelte.config.js:

svelte.config.js js 
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // preprocess erlaubt u.a. <script lang="ts">
  preprocess: vitePreprocess(),
  kit: {
    // Der Adapter bestimmt das Ausgabe-Ziel des Builds
    adapter: adapter()
  }
};

export default config;

Standardmäßig ist adapter-auto gesetzt: Es erkennt gängige Hosting-Plattformen automatisch. Später im Kurs (Modul M11) tauschen wir ihn gegen einen konkreten Adapter aus, z. B. adapter-node für einen eigenen Server oder adapter-static für eine rein statische Seite. Für jetzt musst du hier nichts anfassen.

ℹ️ Merke dir nur das Konzept

Ein und dieselbe SvelteKit-App kann durch Austausch des Adapters auf sehr unterschiedlichen Zielen laufen. Die Details klären wir im Deployment-Modul — hier reicht es zu wissen, dass es diesen Schalter gibt.

Zusammenfassung

💡 Das Wichtigste

  • npx sv create meinprojekt legt ein neues Projekt an.
  • Wähle minimal + TypeScript; Add-ons sind optional und nachrüstbar.
  • npm install, dann npm run dev — Server läuft auf Port 5173.
  • Vite ist Dev-Server und Bundler in einem; der Adapter bestimmt das Build-Ziel.

🎯 Probier es selbst

Lege ein Projekt namens svelte-spielwiese an (minimal + TypeScript, ohne Add-ons), starte den Dev-Server und öffne http://localhost:5173. Ändere dann in src/routes/+page.svelte die Überschrift, speichere und beobachte, wie schnell der Browser sich aktualisiert.