Table of Contents
Introduction
SvelteKit Basics
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
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
Introducing SvelteFlix
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.
Header & Footer Images
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.
Using the TasteJS Movies API
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.
Hero Component
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.
Carousel Component
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.
Now Playing & Upcoming Movies
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.
Dynamic View Route
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.
Populating the Results Page
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.
Infinite Scrolling
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.
Infinite Loading
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.
Client-Side Caching
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.
Search Page
Rich walks through building a search page that will request data from the API for movies that relate to the user input search query.
Movie Page
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.
Details & Recommended Movies
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.
