Svelte and Svelte kit
Svelte Adventures Part 2
Let's get this Svelte party started. We've already gone through what Svelte is, but now we're going to talk about SvelteKit.
What is SvelteKit?
SvelteKit is a framework built on top of Svelte that allows you to quickly start up a Svelte application.
Here are just a few of its features
- Allows you to use Server-Side-Rendering(SSR)
- Sets up and uses filesystem-based routing
- Uses Vite (Build tool)
Creating an App
It's quick to set up and use SvelteKit, I literally can start building within a few minutes with SvelteKit.
npm init svelte my-app
npm run dev
(Spent all this time making a gif and it does not work :P)
Exploring the App
Vite hot reloading
And just like that, you have Vite running and serving your site, making a change to any file should hot update your application, this means that you do not need to hit the reload on the page to see the change, it'll just happen!
I installed the basic starter app, this will scaffold and set up a basic app. The most important folder to look at first is the routes one, this is the one that we talked about briefly before, it holds the filesystem-based routing.
Index.svelte will be your root location. The folder todos will be a route of /todos.
If we wanted to create another route inside of /todos maybe /todos/done then we would create another folder that's inside of the todos called 'done'. As you can see, it's extremely simple and logical how the routing is all set up, and it just works!
I've also added a file called [slug].svelte inside of the /done folder.
We're only briefly touching on routing in this article, but in the next article, I'll be going into more depth. We will talk about the dynamic routing of why I used [slug].svelte, and what __layout.svelte is, how to avoid files being displayed as routes. Routing docs