# My SvelteKit App

A SvelteKit application with TypeScript support, configured with all standard file types.

## Development Commands

```sh
# Start development server
npm run dev

# Start with browser open
npm run dev -- --open

# Type checking
npm run check

# Type checking with watch mode
npm run check:watch

# Build for production
npm run build

# Preview production build
npm run preview

# Sync SvelteKit
npm run prepare
```

## Project Structure

```
src/
├── app.html              # HTML template for the application
├── app.d.ts              # TypeScript declarations for SvelteKit types
├── hooks.server.ts       # Server-side hooks (handle, handleError)
├── hooks.client.ts       # Client-side hooks
├── lib/                  # Reusable components and utilities (importable via $lib)
└── routes/               # Route pages and layouts
    ├── +layout.svelte    # Root layout component
    ├── +layout.ts        # Universal layout load function
    ├── +layout.server.ts # Server-only layout load function
    ├── +page.svelte      # Home page component
    ├── +page.ts          # Universal page load function
    ├── +page.server.ts   # Server-only page load function
    └── +error.svelte     # Error page component
static/                   # Static assets served at /
```

## SvelteKit File Types

### Page Files
- `+page.svelte` - Component for a route page, renders HTML and handles UI
- `+page.ts` - Universal load function that runs on server and client
- `+page.server.ts` - Server-only load function with access to cookies, database, and server APIs

### Layout Files
- `+layout.svelte` - Wraps child routes with shared UI (navbar, footer, etc.)
- `+layout.ts` - Universal load function that provides data to all child routes
- `+layout.server.ts` - Server-only layout load for shared data (auth session, user info, etc.)

### Special Files
- `+error.svelte` - Custom error page component, renders when `error()` is thrown
- `+loading.svelte` - Loading indicator shown during navigation
- `+not-found.svelte` - Custom 404 page when a route doesn't exist

### Server Endpoints
- `+server.ts` - API endpoint (GET, POST, PUT, DELETE, etc.) for RESTful routes

### Root Files
- `src/app.html` - HTML template for the entire application
- `src/app.d.ts` - TypeScript declarations extending SvelteKit's global types
- `src/hooks.server.ts` - Server-side hooks for auth, cookies, middleware
- `src/hooks.client.ts` - Client-side hooks for browser-specific initialization

## Getting Started

1. Install dependencies:
   ```sh
   npm install
   ```

2. Start the development server:
   ```sh
   npm run dev
   ```

3. Open [http://localhost:5173](http://localhost:5173) in your browser.

## Building for Production

To create a production version of your app:

```sh
npm run build
```

You can preview the production build with `npm run preview`.

## Deployment

To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.