SvelteKit for Beginners: Building Your First Web App

As a frontend developer always on the lookout for efficient tools, I’ve recently been intrigued by the buzz surrounding Svelte and its ecosystem. The promise of superior performance and a gentler learning curve compared to frameworks like Next.js has piqued my curiosity. This blog post marks the beginning of my journey into the world of SvelteKit, and I’m excited to share my discoveries with you. Together, we’ll explore SvelteKit and harness the power of Vite to create a small application. Let’s embark on this learning adventure!

What is Svelte?

Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app _declaratively_ out of components that combine markup, styles and behaviours. These components are _compiled_ into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.

While this might sound similar to React, Svelte has a key difference: it performs these tasks during the compilation phase. Unlike React, which updates the DOM dynamically as the application runs using the concept of a virtual DOM (V DOM), Svelte compiles your components into highly efficient, imperative code that directly manipulates the DOM.

What is SvelteKit?

SvelteKit isn’t just another JavaScript framework; it’s a meticulously crafted toolkit for building web applications using Svelte. It provides a robust structure for your projects and tackles the intricate aspects of full-stack web development. Some of its standout features include:

• Server-side rendering (SSR)
• Static site generation (SSG)
• API routes
• Code splitting
• File-based routing

Think of SvelteKit as Svelte’s answer to Next.js – it’s a powerful tool that enhances Svelte’s capabilities for building full-fledged web applications.

Setting Up a SvelteKit Project with Vite

Let’s start by creating a new SvelteKit project using Vite. Open your terminal and run:

npm create vite@latest my-sveltekit-app 
cd my-sveltekit-app 
npm install 
npm run dev

This will create a new SvelteKit project using Vite, install dependencies, and start a development server. You can now open your browser and navigate to `http://localhost:5173` to see your app running.

Why Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It’s particularly well-suited for Svelte and SvelteKit projects due to its speed and efficient hot module replacement (HMR).

Understanding the Project Structure

A typical SvelteKit project structure with Vite looks like this:

my-sveltekit-app/ 
├── src/ 
│ ├── lib/ 
│ ├── routes/ 
│ └── app.html 
├── static/ 
├── tests/ 
├── vite.config.js 
├── svelte.config.js 
└── package.json

• `src/`: This is where most of your application code lives.
• `src/lib/`: For your components and utility functions.
• `src/routes/`: Where you define your app’s routes and pages.
• `static/`: For static assets like images and fonts.
• `tests/`: For your test files.
• `svelte.config.js`: Configuration file for your SvelteKit project.
• `vite.config.js`: This is used to configure Vite for your SvelteKit project.

Configuring Vite for SvelteKit

The `vite.config.js` file is where you can customize your Vite setup. Here’s a basic configuration:

import { sveltekit } from '@sveltejs/kit/vite'; 
import { defineConfig } from 'vite'; 

export default defineConfig({ plugins: [sveltekit()] });

This configuration tells Vite to use the SvelteKit plugin, which sets up all the necessary Vite plugins for SvelteKit to work correctly.

Creating Your First Page

In SvelteKit, routing is based on the file system. Let’s create a simple home page:

1. Edit or Create a file `src/routes/+page.svelte`
2. Add the following content:

<script>
let name = 'World';
</script>

<h1>Hello, {name}!</h1>
<p>Welcome to SvelteKit</p>

<style>
h1 {
color: #ff3e00;
}
</style>

Now, when you visit the root of your app, you’ll see this page.

Adding Dynamic Routes

SvelteKit makes it easy to create dynamic routes. Let’s create a page that greets a user by name:

1. Create a file `src/routes/greet/[name]/+page.svelte`
2. Add the following content:

<script>
import { page } from '$app/stores';
</script>

<h1>Hello, {$page.params.name}!</h1>

Now, if you visit `/greet/John`, you’ll see “Hello, John!”.

Leveraging Vite’s Features

Vite brings some impressive features to our SvelteKit project. Let’s look at a couple:

Using TypeScript

To use TypeScript in your SvelteKit project, simply change your file extensions from `.js` to `.ts` and `.svelte` to `.svelte.ts`. Vite will automatically handle the TypeScript compilation, with no extra configuration.

CSS Pre-processors

Vite supports CSS pre-processors out of the box. For example, to use SCSS:

1. Install the SCSS package:

npm install -D sass

2. Use it in your Svelte components:

<style lang="scss">
$color: red;
h1 {
color: $color;
}
</style>

Building for Production

When you’re ready to build your app for production, run:

npm run build

This command will create a production-ready build of your app in the `build` directory.

Conclusion

This introduction to SvelteKit with Vite has covered the basics of setting up a project, understanding its structure, creating pages, and handling dynamic routes. We’ve also touched on some of the benefits that Vite brings to the development process.

SvelteKit, combined with Vite, provides a powerful and efficient framework for building modern web applications. The integration with Vite brings benefits like faster build times, efficient hot module replacement, and out-of-the-box support for TypeScript and CSS pre-processors.

As you continue your journey with SvelteKit and Vite, there’s much more to explore, including state management (which we’ll cover in a future blog post). Have a good day!