M0 · Einstieg

Projekt-Struktur

Wo liegt was? Ein Rundgang durch die Ordner eines SvelteKit-Projekts — und was jeder Teil im Rails-Vokabular bedeutet.

Der Überblick

Ein frisches SvelteKit-Projekt sieht auf den ersten Blick ungewohnt aus, ist aber erstaunlich flach. Fast dein gesamter Code lebt unter src/:

Verzeichnisbaum bash

meinprojekt/
├── src/
│   ├── routes/            # dateibasiertes Routing (jede Route ein Ordner)
│   │   ├── +page.svelte   # die Seite unter "/"
│   │   ├── +layout.svelte # Rahmen um alle Seiten
│   │   └── about/
│   │       └── +page.svelte   # die Seite unter "/about"
│   ├── lib/               # eigener Code, per $lib importierbar
│   │   └── components/
│   ├── app.html           # HTML-Grundgerüst der ganzen App
│   └── app.css            # globale Styles
├── static/                # statische Dateien (unverändert ausgeliefert)
│   └── favicon.png
├── svelte.config.js       # Svelte- & Adapter-Konfiguration
├── vite.config.ts         # Vite-Konfiguration (Plugins, Server)
└── package.json

Die wichtigsten Anlaufstellen sind src/routes (deine Seiten und Endpunkte) und src/lib (dein wiederverwendbarer Code). Der Rest sind Konfigurationsdateien und ein statischer Ordner. Sehen wir uns die Teile einzeln an.

`src/routes` — dateibasiertes Routing

SvelteKit hat keine zentrale Routing-Datei. Stattdessen bestimmt die Ordnerstruktur unter src/routes die URLs deiner App: Jeder Ordner ist ein Pfad-Segment, und spezielle Dateien mit einem +-Präfix füllen ihn mit Leben.

Ordner = URL bash

src/routes/
├── +page.svelte              →  /
├── blog/
│   ├── +page.svelte          →  /blog
│   └── [slug]/
│       └── +page.svelte      →  /blog/mein-artikel  (dynamisch)
└── api/
    └── health/
        └── +server.js        →  /api/health  (JSON-Endpunkt)

Die wichtigsten Spezialdateien (Details folgen in den späteren Modulen):

+page.svelte — die sichtbare Seite einer Route (das Markup).
+page.js — lädt Daten für die Seite; läuft sowohl auf Server als auch im Browser (universal).
+page.server.js — lädt Daten nur auf dem Server (z. B. direkter Datenbankzugriff, Secrets).
+layout.svelte — ein Rahmen, der alle Seiten darunter umschließt (Navigation, Footer …).
+server.js — ein API-Endpunkt, der reine Daten (z. B. JSON) statt einer Seite zurückgibt.

ℹ️ Nur ein Vorgeschmack

Lass dich von der Liste nicht erschlagen — für den Einstieg reicht +page.svelte. Die anderen Dateien behandeln wir ausführlich in den Modulen zu Routing (M8) und Daten (M9).

`src/lib` und der `$lib`-Alias

Alles, was nicht direkt eine Route ist — Komponenten, Hilfsfunktionen, Typen, Datenbank-Code — gehört nach src/lib. Der Clou: Von überall in der App erreichst du diesen Ordner über den festen Alias $lib, ganz ohne fragile relative Pfade.

src/lib/utils/format.ts ts

// src/lib/utils/format.ts
export function euro(betrag: number): string {
  return betrag.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
}

Irgendeine Seite svelte

<script lang="ts">
  // $lib zeigt immer auf src/lib — egal wie tief die Datei verschachtelt ist.
  // Kein zerbrechliches "../../../lib/utils/format" mehr.
  import { euro } from '$lib/utils/format';
</script>

<p>Preis: {euro(19.9)}</p>

🛤️ Rails-Vergleich: das große Ganze

Wenn du die SvelteKit-Ordner ins Rails-Vokabular übersetzt:

src/routes ≈ app/views + config/routes.rb in einem — die Struktur ist das Routing.
+page.server.js ≈ die Controller-Action, die Daten für die View bereitstellt.
+server.js ≈ eine API-Controller-Action, die render json: zurückgibt.
src/lib ≈ app/ allgemein (Models, Helpers, Components); $lib ≈ Rails' Autoloading, das dir absolute Referenzen erspart.
static/ ≈ public/ — 1:1 dieselbe Idee.
src/app.css ≈ app/assets/stylesheets.

Das HTML-Gerüst und globale Styles

src/app.html ist die äußere HTML-Hülle, in die SvelteKit deine App einsetzt. Die %sveltekit.…%-Platzhalter füllt das Framework beim Rendern:

src/app.html html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div>%sveltekit.body%</div>
  </body>
</html>

Hier trägst du globale <meta>-Tags, das Favicon oder eine Sprach-Angabe ein. src/app.css daneben enthält globale Styles, die für die ganze App gelten — im Gegensatz zu den scoped Styles einzelner Komponenten, die wir in Modul M1 kennenlernen.

Konfiguration und statische Dateien

svelte.config.js — Einstellungen für Svelte und den Adapter (siehe vorige Lektion): Preprocessing, Aliase, Build-Ziel.
vite.config.ts — Vite selbst: Plugins (auch das SvelteKit-Plugin), Dev-Server-Optionen, Test-Setup.
static/ — Dateien, die unverändert unter dem Web-Root ausgeliefert werden: Favicon, robots.txt, Bilder. Eine Datei static/logo.png ist im Browser unter /logo.png erreichbar.

⚠️ static/ ist nicht src/lib/assets

Faustregel: Kommt eine Datei über eine feste URL in den Browser (Favicon, robots.txt), gehört sie nach static/. Wird ein Asset dagegen in Code importiert und soll von Vite optimiert werden (z. B. ein Bild in einer Komponente), lege es unter src/lib ab und importiere es.

Zusammenfassung

💡 Das Wichtigste

src/routes: Ordnerstruktur = URLs; +-Dateien geben Rollen (Seite, Layout, Endpunkt).
src/lib + $lib: wiederverwendbarer Code ohne relative Pfad-Hölle.
src/app.html ist die HTML-Hülle, src/app.css die globalen Styles.
static/ für unveränderte Dateien; svelte.config.js & vite.config.ts für Konfiguration.

🎯 Probier es selbst

Öffne dein Projekt und lege einen neuen Ordner src/routes/about/ mit einer Datei +page.svelte an (Inhalt: eine einfache Überschrift). Rufe dann http://localhost:5173/about auf. Lege außerdem ein Bild in static/ und prüfe, dass es unter der passenden URL erscheint.