kitanat / sveltekit-workshop

Repository including all the source code and information for This Dot's SvelteKit Workshop

Delightful Web Development with SvelteKit

SvelteKit Workshop by This Dot Labs

Clone this repository to get started with the workshop.

Recommended IDE Setup

VS Code + Svelte Extension Pack.

Module Branches

There are different branches for each module and sub-module in the workshop. You can checkout the branch for the module you are working on by running the following command:

git checkout module-1

git checkout module-2.2

If you get stuck, you can checkout the branch with the appended -solution to the name. Solution branches are provided for each module and submodule.

Branches:
main
module-1
module-2.1
module-2.1-solution
module-2.2
module-2.2-solution
module-2.3
module-2.3-solution
module-2.4
module-3.1
module-3.2
module-3.3
module-3.4
module-3.4-solution
module-3.5
module-4.1
module-4.1-solution
module-4.2
module-4.2-solution
module-4.3
module-4.4
module-4.4-solution
module-4.5
module-4.5-solution
module-4.6
module-5.0
module-5.0-solution
module-6.1
api (for local use API server)

Workshop Outline

Module 1: Svelte and SvelteKit

Learn about the relationship between Svelte and SvelteKit, what SvelteKit brings to the table.

In this module we will cover:

• Svelte and SvelteKit
• Setting up a new SvelteKit application for development

Module 2: Routing

SvelteKit provides robust filesystem-based routing for your application.

In this module we’ll learn about:

• SvelteKit’s directory driven filesystem-based router
• Loading data for SvelteKit pages
• SvelteKit’s Layouts and Error Pages

Module 3: Even more Routing

To be as flexible as possible, SvelteKit provides many routing features so you can create the URL structure you need

• Rest params, optional params and breaking out of layouts
• Routing Matchers
• Route Priority

Module 4: Server Side Svelte

SvelteKit allows you to restrict and isolate code to only ever be run on the server, never exposing it to the client. With that understanding we will learn about:

• Using Secrets and Environment Variables
• Creating API endpoints
• SvelteKit Hooks

Module 5: Forms

SvelteKit’s approach to forms and data mutation is simple: use the platform, then progressively enhance the experience. To facilitate that we will explore:

• Handling for submissions with SvelteKit Actions
• Enhancing forms with JavaScript on the client

Module 6: Deployment

SvelteKit offers many options for how to build your site for production all the way down to the page level. In this module we’ll discuss:

• SvelteKits Page Options
• Adapters

[Course Prerequisites]

• Computer with internet access
• A microphone and a webcam
• An IDE of choice (we will be using Visual Studio Code)
• Version 16+ or newer of Node installed on your computer
• Basic understanding of HTML and CSS
• Good understanding of JavaScript / TypeScript (all the examples will be in Typescript)
• Previous Knowledge of Svelte - the component framework SvelteKit is built on top of - is recommended