Fullstack Svelte with SvelteKit

4 hours, 52 minutes CC
Fullstack Svelte with SvelteKit

Course Description

Build full stack web apps with SvelteKit by the creator himself, Rich Harris! Discover the magic of SvelteKit, a “love letter to web development” framework that offers server-side rendering paired with client-side navigation capabilities. Dive into SvelteKit basics, forms, API routing, stores, advanced SvelteKit features like server hooks and caching. You'll also learn to create a real-world app "Svelte Flix", utilizing the Movies API to fetch and present movie data dynamically! This course is compatible with Svelte versions 3 and 4.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: June 13, 2023

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 4 minutes
  • Introduction
    Rich Harris introduces the course by providing an overview of the material, the Learn.Svelte.Dev website, and the structure of a SvelteKit project. SvelteKit is an application framework that renders applications on the server but can transition to client-side navigation to avoid reloading. This course is compatible with Svelte versions 3 and 4.

SvelteKit Basics

Section Duration: 1 hour, 22 minutes
  • Routing in SvelteKit
    Rich discusses SvelteKit's file system-based routing, which maps pages of the application to directories in the codebase. Creating dynamic routes and UI layouts that apply to all routes in the same directory are also covered in this segment.
  • Loading Data on the Server
    Rich walks through fetching post data from the server by declaring a load function in a module that only runs on the server. Throwing an error if a nonexistent post is visited and displaying a loading spinner are briefly covered in this segment.
  • Layout Data
    Rich demonstrates creating data layouts, similar to the UI layouts, that load data for every child route. SvelteKit is aware of layout changes and will not unnecessarily reload the data if the layout does not change.
  • Headers, Cookies, & Shared Modules
    Rich discusses setting headers and cookies on the response using Set-Header, Set-Cookie, and the cookies API. Organizing shared modules into a lib directory, allowing them to be accessed by any module in the src folder, is also covered in this segment.
  • Forms
    Rich demonstrates posting data to the server from the browser using forms and how to name form actions. Using the request object will update the database and reload the page without needing JavaScript or having to write fetch code.
  • Form Validation
    Rich discusses validating user-submitted data using the browser's built-in form validation and further protection from incorrect user input using server-side validation. SvelteKit will direct users to an error page by default which can be avoided by utilizing the fail helper function that returns data from the action along with the HTTP status code.
  • Progressive Enhancement
    Rich discusses progressively enhancing users' experience when JavaScript is available by implementing the enhance function. When utilized, enhance emulates the browser-native behavior except for the full-page reloads and allows more complex UI like transitions.
  • Custom use:enhance
    Rich demonstrates adding pending states and optimistic UI by providing a callback to the action. The use:enhance action is customizable and can be used to cancel submissions, handle redirects, or control whether the form is reset.
  • API Routes: GET & POST
    Rich walks through creating API routes by implementing a +server.js file that can export functions that correspond to GET and POST HTTP methods. Student questions regarding whether API endpoints are open by default and what the JSON utility uses under the hood are also covered in this segment.
  • API Routes: Other Handlers
    Rich demonstrates creating API routes for the PUT and DELETE HTTP methods. Student questions regarding putting logic in an API handler or a server module in a lib directory and if endpoints could be used later for a mobile app are also covered in this segment.
  • SvelteKit Stores
    Rich discusses stores in the $app/stores module, including page, navigating, and updating. The page store provides information about the current page, navigating represents the current navigation, and updated contains true or false depending on whether a new version of the app has been deployed since the page was first opened.
  • Errors & Redirects
    Rich walks through handling expected and unexpected errors, customizing SvelteKit's default error and fallback error page, and redirecting from one page to another. A student's question regarding web hosts expecting a 404.html file is also covered in this segment.

Advanced SvelteKit

Section Duration: 1 hour, 4 minutes
  • Hooks
    Rich demonstrates intercepting and overriding SvelteKit's default behavior using hooks and the contents of the RequestEvent object. The handleFetch and handleError hooks are also covered in this segment.
  • Page Options
    Rich discusses exporting page options from the page, page.server, layout, and layout.server modules. Examples of the ssr, csr, prerender, and trailingSlash page options are demonstrated in this segment.
  • Link Options
    Rich demonstrates using the preload link option to anticipate page navigation and begin the navigation process when a user hovers over or taps on a link. Disabling client-side routing using the data-sveltekit-reload attribute is also covered in this segment.
  • Advanced Routing
    Rich provides examples of SvelteKit's advanced routing features, including optional parameters, rest parameters, parameter matchers, routing groups, and breaking out of the layout hierarchy. Routing groups can be a convenient way to share UI and data-loading logic between different routes.
  • Advanced Loading
    Rich discusses some advanced loading options for when it doesn't make sense to load directly from the server. Universal load functions, combining server and universal load functions, using parent data, invalidation, custom dependencies, and invalidateAll are covered in this segment.
  • Environment Variables
    Rich demonstrates declaring environment variables and how SvelteKit helps prevent leaking sensitive data to the browser. Examples using dynamic and static variables for both private and public environments are also covered in this segment.

SvelteFlix Application

Section Duration: 2 hours, 19 minutes

Wrapping Up

Section Duration: 1 minute

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now