Table of Contents
IntroductionRich 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.
Routing in SvelteKitRich 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 ServerRich 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 DataRich 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 ModulesRich 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.
Form ValidationRich 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.
Custom use:enhanceRich 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 & POSTRich 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 HandlersRich 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 StoresRich 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 & RedirectsRich 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.
HooksRich 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 OptionsRich 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 OptionsRich 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 RoutingRich 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 LoadingRich 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 VariablesRich 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.
Introducing SvelteFlixRich 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.
Header & Footer ImagesRich 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.
Using the TasteJS Movies APIRich 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.
Hero ComponentRich 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.
Carousel ComponentRich 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.
Now Playing & Upcoming MoviesRich 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.
Dynamic View RouteRich 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.
Infinite ScrollingRich 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.
Infinite LoadingRich 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.
Client-Side CachingRich 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.
Search PageRich walks through building a search page that will request data from the API for movies that relate to the user input search query.
Movie PageRich 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.
Details & Recommended MoviesRich continues working on the Movie's page by adding more movie details and a list of recommended movies at the bottom of the page.