svelte-build-deploy

SvelteKit — Build & Deploy

Authoritative reference for working in SvelteKit projects: project layout, routing, data loading, mutations, and getting an app to production.

Project Structure

my-app/
├─ src/
│  ├─ lib/                   # $lib alias — shared modules
│  │  └─ server/             # $lib/server — server-only code
│  ├─ params/                # custom param matchers
│  ├─ routes/                # filesystem routes (root)
│  ├─ app.html               # HTML shell
│  ├─ error.html             # static fallback error page
│  ├─ hooks.server.ts        # server hooks
│  ├─ hooks.client.ts        # client hooks
│  └─ hooks.ts               # shared (universal) hooks
├─ static/                   # served verbatim at /
├─ tests/
├─ svelte.config.js          # Kit + adapter config
├─ vite.config.ts
├─ tsconfig.json
└─ package.json

Key path aliases:

• $lib → src/lib
• $lib/server/* → server-only; importing from client code is a build error
• $app/* → SvelteKit runtime modules
• $env/static/private, $env/static/public, $env/dynamic/* → environment variables

File-based Routing

Inside src/routes/, each directory is a URL segment. Files prefixed with + are route files:

File	Role
+page.svelte	Page UI
+page.ts	Universal load (runs server + client)
+page.server.ts	Server load and form actions
+layout.svelte	Wraps child pages; renders {@render children()}
+layout.ts / +layout.server.ts	Layout-level load
+error.svelte	Error boundary
+server.ts	API endpoint (HTTP method exports)

Dynamic segments use brackets:

• [slug] — required parameter
• [[slug]] — optional parameter
• [...rest] — catch-all
• [id=int] — parameter matcher (custom validator in src/params/int.ts)

Rule of thumb:

• All files run on the server. All run on the client too, except +server.ts.
• +layout and +error apply to their directory and all subdirectories.

+page.svelte