rghvdberg / sveltekit-crash-course

Files and notes for The Net Ninja's SvelteKit Crash Course Tutorial

SvelteKit Tutorial (Crash Course)

• 1 - What is SvelteKit?

  • SvelteKit
    • Server-side and client-side rendering
    • Comes with a routing system
    • Provides a backend API
    • Code Splitting
    • built on top of Vite
      • development server with Hot Module Replacement (live updates)
  • Course files https://github.com/iamshaunjp/sveltekit-tutorial
  • Sveltekit docs https://kit.svelte.dev/docs/introduction

• 2 - Setting up a SvelteKit App

  • npm init svelte@next myApp

• 3 - Svelte Components (refresh)

• 4 - Pages & Routes

  • filesystem-based router
    • src/routes creates root
    • src/routes/about creates /about
  • https://kit.svelte.dev/docs/routing

• 5 - Reusable Components

  • $lib = src/lib/
    • I had to edit .svelte-kit/tsconfig.json

    {
      "compilerOptions": {
        "paths": {
          "$lib": [
              "../src/lib"
          ],
          "$lib/*": [
              "../src/lib/*"
          ]
      },

    • see also: sveltejs/language-tools#1459
    • /src/lib/component.svelte works fine, no need for +page.svelte naming

• 6 - Layout Components

  • use +layout.svelte for layouts
  • components are rendered in <slot> </slot>

• 7 - Reset Layouts

• https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group

  • +layout.svelte files inherit from layout files up in the file tree
  • use (group) for layout structure
    • (App), (Guides) doesn't show in the url
    • routes/+layout.svelte contains <slot> </slot>
    • (guides)+layout@.svelte refers to the root layout and thus overrides (App)/+layout.svelte

  ├── routes
      ├── (App)
      │   ├── about
      │   │   └── +page.svelte
      │   ├── (guides)
      │   │   ├── guides
      │   │   │   └── +page.svelte
      │   │   └── +layout@.svelte ┄┐
      │   ├── +layout.svelte       ┊
      │   └── +page.svelte         ┊
      └── +layout.svelte <┄┄┄┄┄┄┄┄┄┘
  

• 8 - Loading Data & SSR

  • https://kit.svelte.dev/docs/load

    A +page.svelte file can have a sibling +page.js that exports a load function, the return value of which is available to the page via the data prop:

  ├── guides
  │   ├── +page.js
  │   └── +page.svelte
  └── +layout@.svelte
  

• 9 - Client-side vs Server-side Code

  • on initial request code is run on the server, and some DOM objects aren't available.

• 10 - Dynamic Routes

  • id get's it's own folder

    ├── guides
    │   ├── [id]
    │   │   ├── +page.js
    │   │   └── +page.svelte
    │   ├── +page.js
    │   └── +page.svelte
    └── +layout.svelte
    

• 11 - Redirects

  • file +page.js

  import { error } from "@sveltejs/kit";
  throw error(420, "Could not fetch the guides");
  //
  import { redirect } from "@sveltejs/kit";
  throw redirect(302, "/guides");
  

• 12 - Prefetching Data

  • Prefetching data is enabled by default, no code to add.
  • Test: Firefox -> CTRL+SHIFT+I -> Networking -> hover over link

• 13 - Error Pages

  • < https://kit.svelte.dev/docs/errors >
  • add +error.svelte

• 14 - Deploying to Vercel

  • https://vercel.com/login
  • use github to register

• 15 - API Routes

  • https://learn.svelte.dev/tutorial/get-handlers
  • add +server.json
    • export function GET()