Tooling, Testing & Production

From component to shipped app

You know Svelte the language now. This module is the workflow around it: how you scaffold a project, keep it type-safe, prove it works, and get it in front of users. None of it is Svelte-specific magic — it’s the ordinary craft of a Vite-based project, with the Svelte-flavoured tools called out.

What this module covers

Lesson	What you’ll learn
Project & tooling	Scaffolding with sv create, Vite, and svelte-check
TypeScript with Svelte	Typing runes, props, snippets, and generic components
Testing	Vitest, @testing-library/svelte, and Playwright
Performance & deploy	Small output, adapters, prerendering, and production builds

The toolchain at a glance

flowchart LR
  sv["sv CLI: scaffold"] --> vite["Vite: dev server + build"]
  vite --> check["svelte-check: types + diagnostics"]
  vite --> test["Vitest + Playwright: tests"]
  vite --> adapter["SvelteKit adapter: deploy target"]
  adapter --> prod["production site"]

What sits around your Svelte components

The through-line: Svelte compiles to small output by default, and the surrounding tools (Vite, svelte-check, Vitest, adapters) are the same modern JavaScript toolchain you’d use anywhere — so most of this transfers directly from other frameworks.

🧡 The one-line takeaway

This module is the workflow around Svelte: scaffold with the sv CLI, develop and build on Vite, keep types honest with svelte-check, prove behaviour with Vitest + Testing Library + Playwright, and deploy via a SvelteKit adapter. The compiler already gives you small, fast output — the toolchain is standard modern JavaScript tooling with a few Svelte-aware pieces.

What build tool underlies a modern Svelte/SvelteKit project?

Webpack only Vite Rollup configured by hand No build tool

What does `svelte-check` do?

Runs the app in production Type-checks and reports diagnostics across your .svelte files, including the markup Minifies CSS Deploys the site

Submit

Mark as complete