$devvkit learn --librarie sveltekit-guide

SvelteKit Guide

[svelte][ssr][full-stack][compiler]

JavaScript / TypeScript

Install

npx sv create my-app
cd my-app
npm install
npm run dev

SvelteKit is the official application framework for Svelte. Svelte shifts work from browser to compiler: your components compile to highly optimized vanilla JS at build time.

Svelte 5 introduces runes (, , ) which bring fine-grained reactivity without the old let magic. The mental model is simpler than React's hooks or Vue's ref.

SvelteKit provides file-based routing, server load functions, form actions, streaming, and adapter-based deployment to serverless, Node, or static hosts.

Setup

Create project· Scaffold SvelteKit app.

npx sv create my-app --template demo
cd my-app
npm run dev

Routing

Page route· Route with data loading.

// src/routes/+page.ts
export async function load({ fetch }) {
  const users = await fetch('/api/users').then(r => r.json())
  return { users }
}

// src/routes/+page.svelte
<script lang="ts">
  let { data } = ()
</script>
{#each data.users as user}
  <p>{user.name}</p>
{/each}

Dynamic route· Route param.

// src/routes/users/[id]/+page.ts
export async function load({ params, fetch }) {
  const user = await fetch(/api/users/).then(r => r.json())
  return { user }
}

Data Loading

Server-only load· Load runs on server only.

// src/routes/+page.server.ts
export async function load({ locals }) {
  // Direct DB access: never exposed to client
  const users = await db.findMany()
  return { users }
}

Form Actions

Form action· Server-side form handler.

// src/routes/login/+page.server.ts
export const actions = {
  default: async ({ request, cookies }) => {
    const form = await request.formData()
    const email = form.get('email')
    // validate, set cookie, redirect
    throw redirect(303, '/dashboard')
  }
}

Runes

Runes: · Fine-grained reactive state.

<script lang="ts">
let count = (0)
let doubled = (count * 2)
(() => { console.log('count:', count) })
</script>

<button onclick={() => count++}>{count}</button>

Runes: class syntax· Reactive class.

class Counter {
  count = (0)
  doubled = (this.count * 2)
  increment() { this.count++ }
}

Deployment

Deploy to Vercel· Adapter-based deploy.

npm install --save-dev @sveltejs/adapter-vercel
// svelte.config.js:
import adapter from '@sveltejs/adapter-vercel'
export default { kit: { adapter: adapter() } }