Development server startup
Run `npm run dev` to start the development server. The development server runs on localhost:5173 by default. Dependencies must be installed before running this command if they were not installed during project creation.
Svelte · SvelteKit · all subjects
getting-started
56 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Recommended editor setup
Visual Studio Code with the Svelte extension is the recommended editor for SvelteKit development. Support also exists for numerous other editors through the Svelte Society editor support collection.
Create new SvelteKit project command
Run `npx sv create my-app` to scaffold a new SvelteKit project. The command creates a new project in the specified directory and prompts for basic tooling setup such as TypeScript.
Single-page apps (SPAs) use client-side rendering exclusively
Single-page apps (SPAs) in SvelteKit exclusively use client-side rendering (CSR). SPAs can be built with SvelteKit and can have either a SvelteKit backend or a separate backend in another language or framework.
Multi-page apps: use data-sveltekit-reload and csr = false
While SvelteKit is not typically used for traditional multi-page apps, you can use the data-sveltekit-reload attribute to render links on the server. Set csr = false to remove all JavaScript on a page and render any links on the server when clicked.
Separate backend deployment recommendations
For applications with a backend written in another language (Go, Java, PHP, Ruby, Rust, C#), the recommended approach is to deploy the SvelteKit frontend separately using adapter-node or a serverless adapter. Single-page apps can be served by the backend server but have worse SEO and performance characteristics.
Serverless adapters: adapter-auto, adapter-vercel, adapter-netlify, adapter-cloudflare
SvelteKit apps can run on serverless platforms. The default zero config adapter (adapter-auto) automatically runs apps on supported platforms, or you can use adapter-vercel, adapter-netlify, or adapter-cloudflare for platform-specific configuration. Some adapters like adapter-vercel and adapter-netlify offer an edge option for edge rendering.
Own server or VPS deployment with adapter-node
You can deploy a SvelteKit app to your own server or VPS using adapter-node.
Container deployment with adapter-node
SvelteKit apps can be run within a container such as Docker or LXC using adapter-node.
Library creation with @sveltejs/package
You can create a library to be used by other Svelte apps with the @sveltejs/package add-on to SvelteKit by choosing the library option when running sv create.
Offline and progressive web apps with service workers
SvelteKit has full support for service workers, allowing you to build offline apps and progressive web apps (PWAs).
Mobile apps with Tauri or Capacitor
A SvelteKit SPA can be turned into a mobile app using Tauri or Capacitor. Mobile features like camera, geolocation, and push notifications are available via plugins for both platforms. These platforms start a local web server and serve the application like a static host on the phone.
Default rendering: SSR initial page, CSR subsequent pages
By default, SvelteKit renders the first page with server-side rendering (SSR) and subsequent pages with client-side rendering (CSR). This hybrid rendering approach, called a transitional app, improves SEO and perceived performance of the initial page load, then uses client-side rendering for faster subsequent navigation without rerendering common components.
Static site generation with adapter-static and prerendering
SvelteKit can be used as a static site generator (SSG) using adapter-static, which fully prerenders your site with static rendering. The prerender option can also be used to prerender only some pages while using a different adapter to dynamically server-render other pages.
bundleStrategy: 'single' for mobile and embedded devices
For mobile and embedded device deployments, the configuration option bundleStrategy: 'single' can be used to limit the number of requests made. This is helpful because mobile platforms like Capacitor use HTTP/1, which limits concurrent connections.
Desktop apps with Tauri, Wails, or Electron
A SvelteKit SPA can be turned into a desktop app using Tauri, Wails, or Electron.
Browser extensions with adapter-static or community adapters
Browser extensions can be built using either adapter-static or community adapters specifically tailored towards browser extensions.
Embedded device deployment: use bundleStrategy: 'single' to reduce concurrent requests
Due to Svelte's efficient rendering, SvelteKit can run on low power embedded devices like microcontrollers and TVs. To reduce the number of concurrent requests these devices can handle, bundleStrategy: 'single' is a helpful configuration option.
Incremental Static Regeneration with adapter-vercel
When working with very large statically generated sites, you can avoid long build times using Incremental Static Regeneration (ISR) if using adapter-vercel.
Project structure and routing same across all project types
The project structure and routing will be the same regardless of the project type chosen. The way an application is built, deployed, and rendered is controlled by the chosen adapter and a small amount of configuration.
.svelte-kit directory
As you develop and build a SvelteKit project, SvelteKit generates files in a .svelte-kit directory (configurable as outDir). The contents can be ignored and deleted at any time as they will be regenerated when next running dev or build.
tests directory
If Playwright was added for browser testing when setting up the project, the tests will live in the tests/ directory. If Vitest was added for unit tests, they will live in the src directory with a .test.js extension.
Typical SvelteKit project directory structure
A typical SvelteKit project contains the following directories and files: src/ (containing lib/, params/, routes/, app.html, error.html, hooks.client.js, hooks.server.js, service-worker.js, instrumentation.server.js), static/, tests/, package.json, svelte.config.js, tsconfig.json, and vite.config.js. The project may also contain common files like .gitignore, .npmrc, .prettierrc, and eslint.config.js depending on options chosen during creation.
package.json required dependencies
The package.json file must include @sveltejs/kit, svelte, and vite as devDependencies. Projects created with npx sv create include "type": "module" which means .js files are interpreted as native JavaScript modules with import and export keywords. Legacy CommonJS files need a .cjs file extension.
svelte.config.js file
The svelte.config.js file contains Svelte and SvelteKit configuration.
tsconfig.json configuration
The tsconfig.json file (or jsconfig.json for type-checked .js files) configures TypeScript. SvelteKit generates its own .svelte-kit/tsconfig.json file which the project config extends. To make changes to top-level options such as include and exclude, extend the generated config and see the typescript.config setting.
vite.config.js file
A SvelteKit project is a Vite project that uses the @sveltejs/kit/vite plugin along with any other Vite configuration.
npx sv add command for integrations
The 'npx sv add' command can be used to set up many complex integrations in a single command, including: prettier (formatting), eslint (linting), vitest (unit testing), playwright (e2e testing), better-auth (auth), tailwind (CSS), drizzle (DB), paraglide (i18n), mdsvex (markdown), storybook (frontend workshop), adapters (hosting), and mcp (LLM tooling).
Replace src/node_modules with src/lib
The pattern of putting internal libraries in a directory inside src/node_modules does not work with Vite. Use src/lib instead.
package.json type module requirement
Add "type": "module" to package.json when migrating from Sapper to SvelteKit. This can be done incrementally if using Sapper 0.29.3 or newer.
Remove server dependencies from Sapper
Remove polka or express and middleware such as sirv or compression from package.json when migrating from Sapper.
Replace Sapper with SvelteKit in devDependencies
Remove sapper from devDependencies and replace it with @sveltejs/kit and an appropriate adapter for your deployment platform.
Update npm scripts from Sapper
Update npm scripts as follows: sapper build becomes vite build with Node adapter; sapper export becomes vite build with static adapter; sapper dev becomes vite dev; node __sapper__/build becomes node build.
src/client.js has no SvelteKit equivalent
The src/client.js file has no equivalent in SvelteKit. Any custom logic beyond sapper.start(...) should be expressed in the +layout.svelte file inside an onMount callback.
Service worker imports mapping
Most imports from @sapper/service-worker have equivalents in $service-worker: files is unchanged; routes has been removed; shell is now build; timestamp is now version.
Rename src/template.html to src/app.html
The src/template.html file should be renamed src/app.html. Remove %sapper.base%, %sapper.scripts% and %sapper.styles%. Replace %sapper.head% with %sveltekit.head% and %sapper.html% with %sveltekit.body%. The <div id="sapper"> is no longer necessary.
Update navigation imports from Sapper
Replace goto, prefetch and prefetchRoutes imports from @sapper/app with goto, preloadData and preloadCode imports respectively from $app/navigation.
Replace stores import from Sapper
The stores import from @sapper/app should be replaced. In most cases, you can import navigating and page directly from $app/stores.
Stores migration from Sapper
In Sapper, stores were accessed via stores(). In SvelteKit, use getStores, but in most cases import navigating and page directly from $app/stores. The page store has url and params properties but no path or query. preloading has been replaced with a navigating store containing from and to properties.
Endpoints no longer receive req and res objects
In Sapper, server routes received req and res objects from Node's http module. SvelteKit is environment-agnostic and does not expose these. Endpoints must use the new signature. fetch is now available in the global context.
Include package.json version in application
To include your application's version number or other information from package.json in your application, import JSON from package.json using the import statement with a type assertion: import pkg from './package.json' with { type: 'json' };
SvelteKit will have full TypeScript support
SvelteKit will launch with full TypeScript support.
How to create a new SvelteKit project
To create a new SvelteKit project, run: mkdir my-app && cd my-app && npm init svelte@next, then npm install, then npm run dev -- --open to start the dev server.
SvelteKit documentation and migration resources
Documentation for SvelteKit is available at svelte.dev/docs/kit. Instructions for migrating from Sapper to SvelteKit are available at svelte.dev/docs/kit/migrating.
SvelteKit source code location
The SvelteKit source code is available at github.com/sveltejs/kit.
Start a new SvelteKit project with npm create
To get started with SvelteKit, run `npm create svelte@latest`.
sv create command basic usage
The sv create command sets up a new SvelteKit project. The basic usage is: npx sv create [options] [path]. It can optionally set up additional functionality through add-ons.
sv create --from-playground option
The --from-playground <url> option creates a SvelteKit project from a playground URL. It downloads all playground files, detects external dependencies, and sets up a complete SvelteKit project structure. Example usage: npx sv create --from-playground="https://svelte.dev/playground/hello-world"
sv create --template option values
The --template <name> option specifies which project template to use. The available templates are: minimal (barebones scaffolding for a new app), demo (showcase app with a word guessing game that works without JavaScript), and library (template for a Svelte library set up with svelte-package).
sv create --types option values
The --types <option> option controls whether and how typechecking is added to the project. The available options are: ts (default to .ts files and use lang="ts" for .svelte components) and jsdoc (use JSDoc syntax for types).
sv create --no-types option
The --no-types option prevents typechecking from being added to the project. This option is not recommended.
sv create --add option
The --add [add-ons...] option adds add-ons to the project during the create command, using the same format as sv add. Example usage: npx sv create --add eslint prettier [path]
sv create --no-add-ons option
The --no-add-ons option runs the command without the interactive add-ons prompt.
sv create --install option values
The --install <package-manager> option installs dependencies with a specified package manager. The available package managers are: npm, pnpm, yarn, bun, and deno.
sv create --no-install option
The --no-install option prevents installing dependencies when creating a new SvelteKit project.
sv create --no-dir-check option
The --no-dir-check option skips checking whether the target directory is empty.