Svelte Setup Explained — Project Scaffolding and Configuration

In this tutorial, you will learn about Svelte Setup Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Setting up a Svelte project is straightforward with SvelteKit or Vite. Svelte compiles .svelte files into efficient JavaScript, with optional TypeScript and SCSS support.

What You'll Learn

• Creating a project with degit and Vite
• Project file structure
• .svelte component anatomy
• Adding TypeScript support
• Configuring preprocessors

Why It Matters

Proper setup ensures you have the right tooling for development: hot module replacement, TypeScript compilation, SCSS preprocessing, and optimized production builds.

npm create vite@latest my-app -- --template svelte
cd my-app
npm install
npm run dev

// svelte.config.js
import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

export default {
  kit: { adapter: adapter() },
  preprocess: vitePreprocess(),
};

<script>
  let message = "Svelte is set up!";
</script>

<h1>{message}</h1>

Expected output: A Vite-powered Svelte dev server running at localhost:5173 with HMR and TypeScript support.