Projektstruktur: src routes static

Ein SvelteKit-Projekt verfügt über diese wichtigen Ordner: src/, static/ sowie Konfigurationsdateien im Stammverzeichnis.

src/ enthält Ihren gesamten Anwendungscode: Routen, Komponenten, Bibliothekscode und den Einstiegspunkt der App.

Jeder Unterordner von src/routes entspricht einer URL. Eine Datei namens +page.svelte in einem Ordner legt fest, was unter diesem Pfad gerendert wird.

Der Pfad src/routes/about/+page.svelte wird im Browser unter /about gerendert.

src/lib ist für gemeinsam genutzte Module und Komponenten vorgesehen. Importieren Sie sie über das Alias $lib.

Dateien in static/ werden unverändert an der URL-Wurzel ausgeliefert. Verwenden Sie ihn für favicon.png, robots.txt und andere unverarbeitete Assets.

Das Stammverzeichnis enthält svelte.config.js, vite.config.js, package.json und optional tsconfig.json.

Definiert Präprozessoren, den Adapter und Optionen auf Kit-Ebene. Der Adapter legt fest, wie Ihre App für die Bereitstellung gebaut wird.

Konfiguriert Vite, den zugrunde liegenden Bundler. Fügen Sie hier Plugins, Aliase, Proxy-Regeln für den Server und Build-Optionen hinzu.

src/app.html ist das HTML-Grundgerüst, das jede Seite umschließt. Platzhalter wie %sveltekit.head% werden zur Build-Zeit ausgefüllt.

src/hooks.server.js ermöglicht es Ihnen, Anfragen auf dem Server abzufangen. Hooks behandeln wir in einem späteren Kurs.

Sie kennen nun den Projektaufbau: src für Code, routes für Seiten, lib für gemeinsam genutzten Code und static für unverarbeitete Assets.