Hoppa till huvudinnehåll

SvelteKit Fundamentals Tutorial 📚

Modulsmål 🎯​

Efter denna modul har du:

  • ✅ Gått igenom hela Part 3: Basic SvelteKit från den officiella tutorialen
  • ✅ Befäst dina kunskaper om API endpoints, load functions och form actions
  • ✅ Lärt dig layouts, routing och error handling
  • ✅ Fått en solid grund för resten av kursen
Varför den officiella tutorialen nu? 🤔

Du har redan lärt dig grunderna praktiskt - API endpoints, load functions och form actions. Nu går vi igenom den officiella tutorialen för att:

  • Befästa koncepten du lärt dig
  • Fylla i luckor du kanske missade
  • Se best practices från SvelteKit-teamet
  • Lära dig nya features som vi inte hunnit täcka

Din uppgift 📝​

Gå till SvelteKit Interactive Tutorial och genomför hela Part 3: Basic SvelteKit.

Checklista - Vad du ska klara av: ✅​

Introduktion & Setup​

  • Introducing SvelteKit - Förstå vad SvelteKit är
  • Your first route - Skapa din första route
  • Routing - File-based routing system

Loading Data​

  • Loading data - Load functions (du kan detta redan!)
  • Universal vs server - Skillnaden mellan universal och server-only load
  • Using both - Kombinera server och universal load

Headers and cookies​

  • Setting headers - Sätta HTTP headers
  • Reading and writing cookies - Cookies (du kan detta redan!)

Shared modules​

  • The $lib alias - Importera från $lib (du kan detta redan!)

Forms and data​

  • The <form> element - HTML forms
  • Named form actions - Form actions (du kan detta redan!)
  • Validation - Validera form data
  • Progressive enhancement - use:enhance (du kan detta redan!)

API routes​

  • GET handlers - Skapa API endpoints
  • POST handlers - Hantera POST requests
  • Other HTTP methods - PUT, DELETE, etc.
  • Receiving data - Ta emot data i API routes

$app​

  • $app/environment - Runtime environment info
  • $app/navigation - Programmatisk navigation
  • $app/stores - SvelteKit stores

Errors and redirects​

  • Basics - Error handling grunderna
  • Error pages - Custom error pages
  • Redirects - Hantera redirects

Reflektion efter tutorialen 🤔​

När du är klar, svara på dessa frågor för dig själv:

1. Vad var nytt för dig?​

  • Vilka koncept hade du inte sett innan?
  • Vilka features verkar mest användbara?

2. Vad kändes bekant?​

  • Vilka delar kände du igen från tidigare moduler?
  • Känner du dig mer säker på load functions och actions nu?

3. Vad vill du utforska mer?​

  • Vilka delar av tutorialen var mest intressanta?
  • Vilka features vill du använda i kommande projekt?

Praktisk uppgift: Förbättra din Clicker 🔧​

Efter tutorialen, gå tillbaka till din clicker-app från modul 3 och lägg till:

Error Handling​

<!-- Lägg till i din +page.svelte -->
{#if formData?.error}
  <div class="error">
    ❌ {formData.error}
  </div>
{/if}

Loading States​

<script>
  import { enhance } from '$app/forms';
  
  let isSubmitting = false;
</script>

<form 
  method="POST" 
  action="?/increment" 
  use:enhance={() => {
    isSubmitting = true;
    return async ({ result, update }) => {
      await update();
      isSubmitting = false;
    };
  }}
>
  <button type="submit" disabled={isSubmitting}>
    {isSubmitting ? '⏳ Klickar...' : '🚀 Klicka!'}
  </button>
</form>

API Endpoint​

Skapa src/routes/api/stats/+server.ts:

import { json } from '@sveltejs/kit';
import { getAllUserCounts } from '$lib/store';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async () => {
  const stats = getAllUserCounts();
  
  return json({
    totalUsers: stats.length,
    totalClicks: stats.reduce((sum, user) => sum + user.count, 0),
    topUser: stats[0] || null,
    timestamp: new Date().toISOString()
  });
};

Använd API:et i din app:

<script>
  import { onMount } from 'svelte';
  
  let stats = null;
  
  onMount(async () => {
    const response = await fetch('/api/stats');
    stats = await response.json();
  });
</script>

{#if stats}
  <div class="global-stats">
    <h3>📊 Global Statistik</h3>
    <p>Totalt {stats.totalUsers} användare har klickat {stats.totalClicks} gånger!</p>
    {#if stats.topUser}
      <p>👑 Ledare: {stats.topUser.userId.slice(0,8)}... med {stats.topUser.count} klick</p>
    {/if}
  </div>
{/if}

Vanliga "Aha!"-moment från tutorialen 💡​

Universal vs Server Load​

// +page.server.ts - Körs ENDAST på servern
export const load = (async () => {
  // Kan läsa databaser, filer, etc.
  // Körs aldrig i browsern
}) satisfies PageServerLoad;

// +page.ts - Körs på både server OCH klient
export const load = (async () => {
  // Kan köras i browsern efter navigation
  // Ingen access till server-only APIs
}) satisfies PageLoad;

File-based Routing Magic​

src/routes/
├── +layout.svelte          # Layout för alla sidor
├── +page.svelte            # Hemsida (/)
├── about/+page.svelte      # Om-sida (/about)
├── blog/
│   ├── +page.svelte        # Blogg-lista (/blog)
│   └── [slug]/+page.svelte # Blogg-post (/blog/mitt-inlagg)
└── api/
    └── posts/+server.ts    # API endpoint (/api/posts)

$app Stores Power​

<script>
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  
  // Aktuell URL och params
  $: currentPath = $page.url.pathname;
  $: params = $page.params;
  
  // Programmatisk navigation
  function goHome() {
    goto('/');
  }
</script>

Nästa steg 🚀​

Du är nu redo för Modul 4: Dynamisk Routing! Där bygger vi en forum-app med:

  • Dynamiska routes med [param]
  • Nested routing
  • Praktisk användning av allt du lärt dig
Pro-tips från tutorialen 🎓
  • Layouts är kraftfulla - använd dem för gemensam UI
  • API routes är perfekta för data som ska delas mellan appar
  • Progressive enhancement gör dina appar robusta
  • Error boundaries förhindrar att hela appen kraschar
  • File-based routing är intuitivt när du väl förstår det

Resurser 📚​