Introduction

[00:00:00]
>> Hi everyone, and welcome to this SvelteKit workshop. This is part of a two part course. The other session introduced Svelte and today we're gonna be learning about SvelteKit, which is an application framework that uses Svelte. My name is Rich Harris, I am the creator of Svelte. And today, we're going to be learning how to build full stack applications using SvelteKit.

[00:00:21]
So if you're brand new to Svelte then I recommend doing the Svelte workshop before embarking on this SvelteKit workshop. But if you're already familiar with Svelte, then it's totally fine, it's not a prerequisite, you can dive straight into learning about SvelteKit. And we're gonna be doing that today using learn.svelte.dev, which is our interactive tutorial platform.

[00:00:40]
And the first part of the session today, we're gonna go through part three of the tutorial, which is the introduction to SvelteKit. Then after that, we're gonna learn some advanced SvelteKit techniques. Then finally, we're gonna build a full-stack application using authentication, APIs, and a database. So let's start by learning about what SvelteKit is.

[00:01:02]
Svelte is a component framework, you use it to build little chunks of your user interface declaratively out of components. SvelteKit is an application framework sometimes called a meta framework, and it solves the rest of the problem of building an application that you can deploy to your users. It has features like routing, server-side rendering, data fetching, service workers, TypeScript integration, pre-rendering, single-page apps, library packaging, optimized production builds, deploying to different hosting providers, and so on.

[00:01:33]
Right, there's a lot in there, it might seem a little bit intimidating, but don't worry, we're gonna go through, and it'll all make sense before long. SvelteKit apps are server rendered by default. So like a traditional multi-page app, or MPA, you get the excellent first load and SEO characteristics of a traditional app.

[00:01:54]
But then we transition to client side navigation, like a modern single page app, so that instead of reloading everything when your users navigate from one page to another, everything loads instantly. SvelteKit apps can run anywhere that JavaScript runs. They'll run on Node, they'll run on Dino, they'll run on bun, they'll run on edge functions, and serverless functions.

[00:02:15]
And as we'll see, your users might not need to run any JavaScript at all. You can also deploy your applications as fully static pre-rendered apps where that's appropriate. So let's talk about the project structure of a SvelteKit app. When you create a new SvelteKit app, you'll be left with something like what you see on the right here.

[00:02:33]
We'll go through some of these files in turn. Package.json is something that will be familiar to you if you've used Node before. It lists all of the project's dependencies, including Svelte and SvelteKit, and a variety of scripts for interacting with the CLI. So right now we're running npm run dev in the iframe at the bottom of the screen that you can see.

[00:02:55]
You'll notice that in the package.json we are specifying type module. This makes the project a modern ESM project as opposed to a legacy common JS project, which means that all of the JavaScript files in your app are modern ESM format instead of common JS. Next file is the svelte.config.js, this contains your project configuration.

[00:03:18]
Don't really need to worry about this for the purpose of this tutorial, but if you're curious, then you can learn more about what goes into the configuration file on the reference documentation. Next up is the Vite config. So, SvelteKit uses Vite, which is a development server and build tool that allows you to build apps very fast using all of the modern techniques like hot module reloading.

[00:03:41]
It has out-of-the-box support for TypeScript and all of those other things, and SvelteKit by extension gets all of those benefits. The most important part of our vite.config is this line here. Where we're invoking the SvelteKit plugin. The bit below you can ignore, that's just something that we need within the tutorial.

[00:04:01]
The source directory is where your app source code goes. We have an app.html, this defines the shape of the response that you get when you visit the SvelteKit app. In this tutorial, we've got a bunch of inline styles that we're gonna be using at various stages through the tutorial, but the interesting part of this SvelteKit head section and all the way at the bottom, a SvelteKit body.

[00:04:25]
These are the bits that SvelteKit populates with the HTML and the meta content that relates to the page that the user has requested. And then finally, the static directory contains any assets, like a favicon, that are included when your app is deployed.