Rich Harris
Vercel
Fullstack Svelte with SvelteKit
4 hours, 52 minutes CC
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.
Preview
CloseCourse 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
Table of Contents
Introduction
Section Duration: 4 minutes
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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
Rich walks through the features of a finished version of the SvelteFlix application and sets up a base SvelteKit project. Creating the base application layout and styling is also covered in this segment.
Rich styles the header navigation bar, imports and implements the SvelteKit logo, and introduces The Movie DB API, which will be used to pull in movie data for the SvelteFlix app. How to define a persistent URL for the logo is also covered in this course.
Rich walks through fetching movie data from the TasteJS API and creates an API helper to reduce the amount of repeated code. Making multiple API requests in one by using the append_to_response parameter is also covered in this segment.
Rich demonstrates creating a hero component that contains movie details pulled from the API. Displaying the top trending movie's backdrop and logo images is also covered in this segment.
Rich creates a reusable carousel component and utilizes it to display a scrollable list of the currently trending movies. Styling is also added for left-side padding and spacing between movie images.
Rich adds carousels for the now playing and upcoming movies and walks through reconfiguring the movie data requests to issue in parallel. Implementing a module for the different application views is also covered in this segment.
Rich walks through creating dynamic routes for the different application views and a function to check for matching route parameters. If the page does not exist a error will be thrown.
Rich walks through implementing the data loading to populate the movies for each page view. Starting to configure infinite data loading for browsers without JavaScript and styling the returned movies into a grid is also covered in this segment.
Rich demonstrates only loading relevant data by implementing a loading technique called windowing. The scroll handler will recalculate what should be in view and dispatch an event to load more data when the user scrolls far enough.
Rich defines more CSS styling for responsive viewport sizing and implements a function to load more movie data from the API when a user scrolls far enough.
Rich demonstrates utilizing SvelteKit's separate data loading and rendering to distinguish between pages that do and do not contain infinite loading components. A student's question regarding if movie data is cached or fetched again and implementing a cache to reuse data is also covered in this segment.
Rich walks through building a search page that will request data from the API for movies that relate to the user input search query.
Rich walks through building a page that will contain information about the selected movie, including, description, trailer, budget, genre, and recommendations for other movies. Building the movie's Hero component with the backdrop image and movie description is covered in this segment.
Rich continues working on the Movie's page by adding more movie details and a list of recommended movies at the bottom of the page.
Wrapping Up
Section Duration: 1 minute
Rich wraps up the course by demonstrating additional features that could be added to the SvelteFlix app.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops