Konfiguracja środowiska

Zanim wyruszymy na podbój, musimy przygotować nasz ekwipunek. Każdy wiking potrzebuje dobrej broni - my potrzebujemy Node.js i edytora kodu.

Wymagania

1. Node.js (wersja 22.17 lub nowsza)

Node.js to środowisko uruchomieniowe JavaScript. SvelteKit 3 wymaga Node.js 22.17 lub nowszego. Sprawdź czy masz zainstalowany:

node --version
# Powinno pokazać v22.17.0 lub wyżej (np. v24.x.x)

Jeśli nie masz Node.js albo masz starszą wersję, pobierz aktualną wersję LTS z nodejs.org.

2. Edytor kodu

Polecam VS Code z rozszerzeniem "Svelte for VS Code":

• Kolorowanie składni
• Autouzupełnianie
• Podpowiedzi błędów

3. Terminal

Będziemy używać terminala do:

• Tworzenia projektów
• Instalacji zależności
• Uruchamiania serwera deweloperskiego

Tworzenie projektu Svelte

Użyjemy oficjalnego narzędzia sv (Svelte CLI):

# Utwórz nowy projekt
npx sv create moja-wioska

# Przejdź do projektu
cd moja-wioska

# Zainstaluj zależności (jeśli kreator nie zrobił tego za Ciebie)
npm install

# Uruchom serwer deweloperski
npm run dev

Serwer wystartuje pod adresem http://localhost:5173.

W starszych poradnikach zobaczysz polecenie npm create svelte@latest. Dziś ono już niczego nie tworzy - tylko odsyła do npx sv create.

Opcje podczas tworzenia projektu:

1. Which template would you like?

   • SvelteKit minimal - pusty projekt (polecam na start)
   • SvelteKit demo - z przykładową grą
   • Svelte library - do tworzenia bibliotek

2. Add type checking with TypeScript?

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

3. What would you like to add to your project? (dodatki, tzw. add-ons)

   • prettier - formatowanie kodu
   • eslint - sprawdzanie jakości kodu
   • vitest - testy jednostkowe
   • i wiele innych, np. tailwindcss czy playwright

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

   • npm, pnpm, yarn, bun lub deno - kreator od razu zainstaluje zależności
   • None - wtedy wpisz npm install samodzielnie

Dodatki możesz też dołożyć później poleceniem npx sv add, np. npx sv add tailwindcss.

Struktura projektu SvelteKit

moja-wioska/
├── src/
│   ├── lib/                # Komponenty i narzędzia (alias #lib)
│   │   ├── assets/         # Np. favicon.svg
│   │   └── index.ts        # Wspólne eksporty aliasu #lib
│   ├── routes/             # Strony aplikacji
│   │   ├── +layout.svelte  # Wspólny układ wszystkich stron
│   │   └── +page.svelte    # Strona główna
│   ├── app.d.ts            # Typy aplikacji
│   └── app.html            # Szablon HTML
├── static/                 # Pliki statyczne (np. robots.txt)
├── package.json            # Zależności i alias #lib (pole "imports")
├── tsconfig.json           # Konfiguracja TypeScript
└── vite.config.js          # Konfiguracja Vite i SvelteKit

To jak mapa naszej wioski - każdy katalog ma swoje przeznaczenie!

Całą konfigurację SvelteKit 3 znajdziesz w vite.config.js - ustawienia przekazujesz wtyczce sveltekit():

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

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

W starszych projektach (SvelteKit 2) zobaczysz jeszcze osobny plik svelte.config.js i alias $lib zamiast #lib. W SvelteKit 3 już ich nie ma - o aliasie #lib więcej w Yggdrasil (moduł 2).