Jarrod Kane
Jarrods Blog

Jarrods Blog

Svelte and Svelte kit

Svelte and Svelte kit

Svelte Adventures Part 2

Jarrod Kane's photo
Jarrod Kane
·Apr 24, 2022·

2 min read

Table of contents

  • What is SvelteKit?
  • SvelteKit features
  • Creating an App
  • Exploring the App
  • Resources

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.

SvelteKit features

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
cd my-app
npm install
npm run dev

Gif of terminal creating svelteKit app (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!

Basic routing

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.

Screen Shot 2022-04-24 at 7.56.25 pm.png

Index.svelte will be your root location. The folder todos will be a route of /todos.

Screen Shot 2022-04-24 at 7.59.24 pm.png

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!

Screen Shot 2022-04-24 at 8.02.16 pm.png

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

Resources

 
Share this