Learn SvelteKit - Starting a SvelteKit Project

#Introduction

The previous two episodes built your conceptual foundation: you know what SvelteKit is and how its architecture works. Now it's time to get your hands dirty. Episode 3 is the practical gateway to the whole series — after completing it, you'll have a genuinely running SvelteKit application, complete with TypeScript, ESLint, and Prettier.

The official scaffolding process isn't just copying a template. The scaffolder offers important architectural decisions — language, linting, testing — and writes them into the correct configuration. The result is consistent with ecosystem best practices and easy to maintain.

Throughout this episode, run every command in your own terminal. Don't just read; typing commands and reading error output is part of the learning process. Let's start with the first command.

Prepare your terminal in the folder where the project will be created, for example ~/code, and make sure your internet connection is stable because the scaffolder will download a template.

#Creating an App with the Official Scaffolder

The official way to start a new project is the SvelteKit scaffolder. This command-line tool guides you through choosing a template, language, and tooling in an interactive dialog.

npm create svelte@latest my-app
cd my-app
npm install

After running the first command, the scaffolder asks a few choices: the project type (Skeleton, demo, or library), TypeScript usage, and ESLint, Prettier, Playwright, and Vitest integration. For this series choose a Skeleton project to keep it clean, enable TypeScript and ESLint, then add Prettier. All of these choices can be changed later, so no decision is permanent.

Note: npm create svelte@latest is equivalent to npx create-svelte@latest; both call the same official package.

#Running the Installation

The npm install command downloads all dependencies. SvelteKit 2 and Svelte 5 have a reasonable dependency footprint, but on slow networks this process can take a few minutes. When done, don't forget to run npm install --frozen-lockfile when working in a team so the installed versions are exactly the same on every machine.

Check that the node_modules folder appears and a lockfile is generated. That lockfile is what guarantees everyone on the team gets identical dependency versions.

#Folder Structure and Initial Configuration

A freshly created project has the structure you already know from episode 2. The parts you'll touch most often include:

• src/routes — all pages and endpoints of the application.
• src/lib — shared code importable with the $lib alias.
• src/app.html — the main HTML document where application markup is rendered.
• static — raw assets copied as-is into the output.
• svelte.config.js — SvelteKit configuration.
• vite.config.js — Vite configuration.
• tsconfig.json — TypeScript configuration.

Each folder in src/routes becomes part of the application's URL, and files prefixed with plus like +page.svelte have special routing roles.

#SvelteKit Configuration

SvelteKit configuration

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter()
    }
};
 
export default config;

The svelte.config.js file manages SvelteKit: preprocessor, adapter, aliases, and various kit options. The vite.config.js file handles Vite configuration, such as plugins. Keeping them separate maintains clarity of responsibility. Don't put Vite configuration inside svelte.config.js; the two files are separated so each has a single responsibility and is easy to change when needs evolve.

#Strict TypeScript

The tsconfig.json file inherits settings from .svelte-kit/tsconfig.json, which is generated at build time. With strict: true, TypeScript checks types across all code including Svelte templates.

#Dev Server and Hot Module Replacement

To run the application in development mode:

npm run dev

The server runs at http://localhost:5173 by default. This is when you'll feel SvelteKit's advantage over manual reload approaches: hot module replacement (HMR) updates the changed module without refreshing the whole page. The first compilation does take longer because Vite processes all dependencies; subsequent compilations are much faster thanks to caching.

Change the text in src/routes/+page.svelte and watch the change appear in the browser immediately without losing state. To open the browser automatically, run npm run dev -- --open. If port 5173 is already in use, Vite automatically moves to the next port.

#TypeScript, ESLint, and Prettier

The SvelteKit project provides a ready-to-use quality gate:

npm run check
npm run lint
npm run format

npm run check runs svelte-check for type validation including inside Svelte files. npm run lint calls ESLint, and npm run format tidies up formatting with Prettier. Run check before committing — it catches many errors that would only surface at runtime. Combine all three in a single npm run quality script so it's easy to call in CI later.

Want to format just one file? Use npx prettier --write src/routes/+page.svelte for targeted formatting.

#Closing

Key takeaways:

• The official npm create svelte@latest scaffolder produces a ready-to-use project in one command, complete with template, language, and tooling choices.
• The basic structure consists of src/routes, src/lib, static, src/app.html, plus svelte.config.js and vite.config.js.
• The dev server runs on port 5173 with HMR that updates modules without a full reload and without losing state.
• TypeScript is enabled via strict: true; npm run check validates types down into Svelte templates.
• ESLint (npm run lint) and Prettier (npm run format) keep code consistent and tidy.
• Always keep dependency versions consistent with the lockfile when working in a team.

In the next episode we get into the heart of SvelteKit: routing & nested routes. You'll turn the src/routes folder structure into real URLs, use dynamic routes and catch-all routes, assemble nested layouts and layout resets, and navigate between pages with anchors and the goto function from the $app/navigation module.