A comprehensive guide to SvelteKit, covering routing, layouts, server-side logic, forms, endpoints, and advanced features. Perfect as a reference or learning guide. ## Project Structure SvelteKit uses a file-based routing system. Typical folders: ```typescript src/   routes/        -> pages & endpoints   lib/           -> reusable components, utils   app.html       -> main HTML template   hooks.server.js -> server hooks   hooks.client.js -> client hooks ``` File names define routes automatically: * src/routes/+page.svelte → /\ * src/routes/about/+page.svelte → /about\ * src/routes/blog/[slug]/+page.svelte → dynamic /blog/:slug ## Pages & Layouts Pages are Svelte components in +page.svelte. ```typescript

{data.title}

{data.content}

``` Layouts (+layout.svelte) wrap multiple pages: ```typescript ``` Nested layouts are supported for modular structures. ## Server Data Loading Use +page.server.js or +page.server.ts to fetch data server-side: ```typescript export function load({ params }) {   return {     title: 'SvelteKit Page',     slug: params.slug   }; } ``` Client-side data can use +page.js or +page.ts: ```typescript export async function load({ fetch }) {   const res = await fetch('/api/posts');   const posts = await res.json();   return { posts }; } ``` ## Endpoints (API Routes) Endpoints handle HTTP requests. File naming: ```typescript src/routes/api/posts/+server.js ``` Example: ```typescript import { json } from '@sveltejs/kit'; export const GET = async () => {   const posts = [{ id: 1, title: 'Post 1' }];   return json(posts); }; export const POST = async ({ request }) => {   const data = await request.json();   return json({ success: true, data }); }; ``` ## Forms SvelteKit supports server actions for forms: ```typescript

    Submit

``` Server-side +page.server.ts action: ```typescript export const actions = {   default: async ({ request }) => {     const form = await request.formData();     const title = form.get('title');     return { success: true, title };   } }; ``` ## Routing Basics * Static route: /about → src/routes/about/+page.svelte * Dynamic route: /blog/[slug] → src/routes/blog/[slug]/+page.svelte * Catch-all route: /files/[...path] → src/routes/files/[...path]/+page.svelte ## Navigation & Links Client-side navigation with or goto: ```svelte About Go ``` ## Error Handling Throw errors in server or page load: ```typescript import { error } from '@sveltejs/kit'; export function load() {   throw error(404, 'Page not found'); } ``` Custom error page: src/routes/+error.svelte ```svelte

{error.status}

{error.message}

``` ## Redirects Server redirect: ```typescript import { redirect } from '@sveltejs/kit'; export function load() {   throw redirect(307, '/login'); } ``` ## Environment Variables * .env → private variables (server-side only) * .env.public → accessible on client and server Access via $env: ```typescript import { PUBLIC_API_URL } from '$env/static/public'; ``` ## Hooks Hooks run code on every request. hooks.server.js: ```typescript export async function handle({ event, resolve }) {   console.log(event.request.url);   return resolve(event); } ``` Use hooks for authentication, logging, or session handling. ## Layout & Page Data Data from layouts is inherited by pages: ```typescript // +layout.server.ts export function load() {   return { user: { name: 'Kira' } }; } // +page.svelte

Hello {data.user.name}

``` ## Stores SvelteKit supports Svelte stores for shared state: ```typescript import { writable } from 'svelte/store'; export const session = writable({ loggedIn: false }); ``` Use $session in any component. ## Actions Enhance forms or elements with custom actions: ```typescript ``` ## Adapters & Deployment SvelteKit uses adapters to target platforms: * @sveltejs/adapter-auto → default * @sveltejs/adapter-node → Node server * @sveltejs/adapter-static → static sites * @sveltejs/adapter-vercel → Vercel * @sveltejs/adapter-netlify → Netlify Install adapter and configure svelte.config.js: ```typescript import adapter from '@sveltejs/adapter-static'; export default {   kit: {     adapter: adapter(),   } }; ``` ## Advanced Features ### Streaming Responses ```typescript export const GET = () => {   return new Response('Streamed data', { status: 200 }); }; ``` ### WebSockets / Real-time Use custom server endpoints or integrate with libraries like soketi or [socket.io](http://socket.io). ### TypeScript Support Enable TypeScript by creating tsconfig.json and using .ts / .svelte files with type annotations. This cheat sheet covers the essential SvelteKit features for modern apps: routing, server actions, endpoints, forms, layouts, hooks, and deployment.

typescript