My SvelteKit App

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

Development Commands

# 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:

   npm install
   

2. Start the development server:

   npm run dev
   

3. Open http://localhost:5173 in your browser.

Building for Production

To create a production version of your app:

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 for your target environment.