Environment Setup

Before we set off on our conquest, we must prepare our equipment. Every Viking needs good weapons - we need Node.js and a code editor.

Requirements

1. Node.js (version 22.17 or newer)

Node.js is a JavaScript runtime environment. SvelteKit 3 requires Node.js 22.17 or newer. Check if you have it installed:

node --version
# Should show v22.17.0 or higher (e.g. v24.x.x)

If you do not have Node.js or your version is older, download the current LTS version from nodejs.org.

2. Code Editor

I recommend VS Code with the "Svelte for VS Code" extension:

• Syntax highlighting
• Autocompletion
• Error hints

3. Terminal

We will use the terminal to:

• Create projects
• Install dependencies
• Run the development server

Creating a Svelte Project

We will use the official sv tool (the Svelte CLI):

# Create a new project
npx sv create my-village

# Navigate to the project
cd my-village

# Install dependencies (if the wizard did not do it for you)
npm install

# Run the development server
npm run dev

The server starts at http://localhost:5173.

In older tutorials you will see the npm create svelte@latest command. Today it no longer creates anything - it only points you to npx sv create.

Options during project creation:

1. Which template would you like?

   • SvelteKit minimal - empty project (recommended for starters)
   • SvelteKit demo - with a sample game
   • Svelte library - for creating libraries

2. Add type checking with TypeScript?

   • Yes, using TypeScript syntax - recommended!
   • Yes, using JavaScript with JSDoc comments
   • No

3. What would you like to add to your project? (the add-ons)

   • prettier - code formatting
   • eslint - code quality checking
   • vitest - unit tests
   • and many more, such as tailwindcss or playwright

4. Which package manager do you want to install dependencies with?

   • npm, pnpm, yarn, bun or deno - the wizard installs the dependencies right away
   • None - then run npm install yourself

You can also add add-ons later with npx sv add, for example npx sv add tailwindcss.

SvelteKit Project Structure

my-village/
├── src/
│   ├── lib/                # Components and utilities (#lib alias)
│   │   ├── assets/         # E.g. favicon.svg
│   │   └── index.ts        # Shared exports of the #lib alias
│   ├── routes/             # Application pages
│   │   ├── +layout.svelte  # Shared layout of all pages
│   │   └── +page.svelte    # Home page
│   ├── app.d.ts            # Application types
│   └── app.html            # HTML template
├── static/                 # Static files (e.g. robots.txt)
├── package.json            # Dependencies and the #lib alias ("imports" field)
├── tsconfig.json           # TypeScript configuration
└── vite.config.js          # Vite and SvelteKit configuration

It is like a map of our village - every directory has its purpose!

You will find the whole SvelteKit 3 configuration in vite.config.js - you pass the settings to the sveltekit() plugin:

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

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

In older projects (SvelteKit 2) you will still see a separate svelte.config.js file and the $lib alias instead of #lib. SvelteKit 3 no longer has them - more about the #lib alias at Yggdrasil (module 2).