iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Get Started

By · Reviewed & last updated · Part of Svelte Tutorial

Scaffold a Svelte / SvelteKit app with the official CLI. Zero-config dev server, file-based routing, and tiny output bundles.

Svelte — getting started

EXAMPLE
# ===== 1. Create the project (SvelteKit) =====
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
# Open http://localhost:5173

# Choose: Skeleton, demo, or library. Add TypeScript, ESLint, Prettier, Vitest.

# ===== 2. The structure =====
# src/routes/+page.svelte         the index route
# src/routes/about/+page.svelte   /about
# src/routes/+layout.svelte       shared layout
# src/lib/                        components + utilities
# svelte.config.js                build + adapter config

# ===== 3. A page =====
<!-- src/routes/+page.svelte -->
<script lang="ts">
  let count = 0;
  $: doubled = count * 2;
</script>

<h1>Hello, Svelte</h1>
<button on:click={() => count++}>
  clicks: {count} (x2 = {doubled})
</button>

<style>
  button { padding: 0.5rem 1rem; }
</style>

# ===== 4. A component =====
<!-- src/lib/Counter.svelte -->
<script lang="ts">
  export let start = 0;
  let value = start;
</script>

<button on:click={() => value++}>{value}</button>

<!-- Use it -->
<script>
  import Counter from '$lib/Counter.svelte';
</script>
<Counter start={10} />

# ===== 5. Server endpoints =====
# src/routes/api/hello/+server.ts
import { json } from '@sveltejs/kit';
export const GET = () => json({ ok: true });

# ===== 6. Build + deploy =====
# Pick an adapter (sveltekit auto-detects many):
#   adapter-auto (default), adapter-node, adapter-vercel, adapter-cloudflare, adapter-static
npm run build

# ===== 7. Pure Svelte (no kit) =====
npm create vite@latest my-app -- --template svelte-ts
# Use when you do not need routing / SSR; lighter for embeds + widgets.

# ===== Patterns to internalise =====
# - File-based routing in SvelteKit; the file IS the route
# - Reassign to mutate ([...arr, x] not arr.push)
# - Use stores for cross-component state; props/events otherwise
# - Adapter-static for SPAs; adapter-node for self-host; adapter-vercel/cloudflare for edge

# ===== Pitfalls =====
# - Mutating arrays/objects in place -> no UI update
# - Forgetting + prefix on routes (+page, +layout)
# - Mixing Svelte 4 ($:) and Svelte 5 (runes) idioms in one codebase
# - Skipping vitest + playwright; SvelteKit makes both easy

Why it matters

Svelte / SvelteKit is one of the fastest dev loops in modern web. Create, run, edit — the compiler removes most of what other frameworks add to your bundle. File-based routing, server endpoints, and adapters for every host: build small and ship small.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
npm create svelte@latest my-app
cd my-app && npm install && npm run dev
Try it Yourself »

Discussion

Loading…