Introduction

SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte.

It is similar to Next/Remix or Nuxt if you are coming from React or Vue background.

Svelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.

A SvelteKit app can be thought of as two distinct entities working in tandem — the server and the client.

• 'Server' is, perhaps, a confusing word since your app will often be running in a serverless environment (cloud/edge functions) or might even be deployed as a set of completely static files. It's basic job is to turn a request into a response.
• 'Client' refers to the JavaScript that loads in the browser.

SvelteKit is a meta-framework built on top of Svelte for building rich web apps but it’s easier to think of it as a backend framework that uses Svelte as the component framework.

One have to spend more time on the MDN Web Docs learning about the web platform than some weird abstraction that’s only useful inside SvelteKit as it uses the web platform meaning you’re not learning some framework specific abstraction but using web standards like the Fetch API, Request and Response objects, Headers and FormData for working with forms.

Scaffolding the project

The easiest way to start building a SvelteKit app is to run npm create which will scaffold a new project.

<aside> 💡 npm create is a synonym, or more specifically an alias for npm init. init is the canonical form while create is an alias.

</aside>

ESLint is like a spell checker for your code that gives you useful warnings in your editor from checking your code for problems like accessibility.

Prettier is an opinionated code formatter.

• You might find it does some things you don’t like but it’s a great trade-off considering you don’t have to think about formatting your code and it’s going to be consistent for everyone else working on the project.

Playwright is used for end-to-end testing.

• You can test how your user might use the site using a real browser and check for example if some content is showing or test your registration or checkout process.

Vitest is used for unit testing. That means you’re testing one unit of your code.

• For example you can use Playwright to test your site using a real browser and see if your content works but you would use Vite to test the input and output of the function responsible for sorting the content in some order.

Breakdown of file generated by vite scaffolding tool for SvelteKit: