Revolutionizing Web Development with SvelteKit — Getting Started

SvelteKit pairs Svelte's compile-time component model with server-side rendering and routing, and the result is a framework that feels lighter than its peers without giving up the modern conveniences. Born from Svelte, SvelteKit enhances its predecessor’s reactive components with server-side rendering (SSR), static site generation (SSG), and seamless transitions between pages, making it an attractive choice for modern web applications.

I remember watching Rethinking Reactivity — a talk by the creator of Svelte, Rich Harris — on YouTube a few years ago. As someone who was deeply immersed in the React ecosystem and had regarded the Virtual DOM as the ultimate solution for modern web development, this talk was nothing short of a revelation. It challenged my preconceived notions and introduced me to a completely new way of thinking about state changes and reactivity. The ideas presented in this talk have since inspired me to constantly question the status quo and to remain open to new ideas and approaches. This was my first introduction to Svelte and the beginning of compiler-based web frameworks.

The Need for Speed — Moving Complexity to Servers and Compilers

Furthermore, the JavaScript community, on the whole, is gravitating towards server-centric applications and managing both front and back-end code in a somewhat isomorphic way. The desire for fast, optimized, and easy-to-develop applications has created the need for frameworks that manage the entire web app in a single context. This is leading to the popularity of frameworks such as Astro, Next.js, and SvelteKit. Optimizations can be done across both server and client, allowing for the highest possible performance of web apps, and simplifying code by allowing client and server code to live right next to each other.

Other frameworks are also challenging the conventional approach. For instance, SolidJS is known for being just as fast as Svelte and utilizes the widely used JSX syntax. The important thing is that the web development community as a whole is moving away from abstractions and bloat that slow down application development and moving toward faster compiler and server-centric frameworks.

The Appeal of SvelteKit

Simplicity and Developer Experience

SvelteKit offers an intuitive API and leverages Svelte’s component-based architecture, reducing boilerplate and streamlining the development process. Unlike frameworks that rely on virtual DOM diffing, Svelte compiles components at build time, leading to faster runtime performance and a developer experience focused on productivity.

Performance Benefits

With its compile-time optimizations, SvelteKit ensures that your web applications are not only lightning-fast but also lighter in size. This efficiency is crucial for enhancing user experience, particularly on mobile devices and slow network conditions.

Built-in Features

From SEO-friendly server-side rendering to full static site generation capabilities, SvelteKit is equipped with features that cater to a wide range of web development needs. Its adaptability makes it suitable for everything from small personal blogs to large-scale enterprise applications.

Setting Up Your SvelteKit Development Environment

Getting started with SvelteKit is straightforward, thanks to its streamlined setup process. Here’s how you can jump into SvelteKit development:

Prerequisites

Ensure you have Node.js (version 18.13 or higher) installed on your system. Node.js comes with npm (Node Package Manager), which you’ll use to install SvelteKit.

You can click here to download and install Node.js! I would recommend using the “LTS” version if you want to deploy a production application, and the “latest” version if you want to experiment with the newest features.

Installation Guide

Kicking off your SvelteKit app couldn’t be simpler. Start by running the following commands in the shell of your choice.

npm create svelte@latest my-sveltekit-app
cd my-sveltekit-ap
p
npm install
npm run dev

Just replace my-sveltekit-app with your preferred package name.

Once done, navigate to localhost:5173 and you should see the following.

Explanation of Commands

Here are some more detailed descriptions of each command. You can skip this part if you are familiar with npm and node.

npm create svelte@latest my-sveltekit-app

This command kick-starts your SvelteKit journey by creating a new project named my-sveltekit-app. It fetches the latest version of SvelteKit, ensuring you start with the most up-to-date features and fixes. During the setup, you might be prompted to customize your project, including options like adding TypeScript.

You should see an output like below. I recommend selecting the “Skeleton” project for most use cases, and the “Demo app” if you want to see examples of how to use SvelteKit.

create-svelte version 6.0.9
┌  Welcome to SvelteKit!
│◇  Where should we create your project?
│  my-sveltekit-app
│◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│◇  Which Svelte app template?
│  Skeleton project
│◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Playwright for browser testing, Add Vitest for unit testing
│└  Your project is ready!

And if you are keeping up with the most modern advancements in Svelte, you can try the “Preview” version of Svelte 5. More about that in a future blog post!

cd my-sveltekit-app

After creating your new SvelteKit project, you’ll need to move into the project directory. This command changes your current directory to my-sveltekit-app, where you'll execute further commands to develop and run your application.

npm install

With your project set up and your terminal pointed at your project’s root, this command installs all the necessary dependencies defined in your project’s package.json file. These dependencies include the libraries and tools required to build, test, and run your SvelteKit application.

npm run dev -- --open

This is the command that brings your SvelteKit app to life. It starts a local development server, typically running at localhost:5173, allowing you to view and interact with your application in a web browser. The server watches for file changes, so you can develop with instant feedback, seeing updates live as you code. You should see the following webpage if everything ran correctly.

Congratulations! You’ve just set up your first SvelteKit project. This initial step into the world of SvelteKit opens up a foundation for fast, modern web apps.

In future posts, we’ll be exploring how to get started with SvelteKit and create some incredible applications.