Setting Up a Svelte Project

Svelte doesn't require a specific meta-framework to get started — the fastest way to a working project is Vite's official Svelte template, which gives you plain Svelte with a dev server, hot module reloading, and a production build step.

Scaffolding a project

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

That --template svelte flag (use svelte-ts instead if you want TypeScript) tells Vite to generate a minimal Svelte starter rather than a React or Vue one. npm run dev starts a local dev server, usually at http://localhost:5173, that rebuilds and reloads automatically whenever you save a file.

What you get

my-svelte-app/
├── src/
│   ├── App.svelte      ← your root component
│   ├── main.js         ← mounts App.svelte into the page
│   └── app.css
├── index.html           ← the single HTML page the app lives in
├── vite.config.js       ← registers the Svelte plugin with Vite
└── package.json

main.js is the entry point that connects your Svelte component tree to an actual DOM element:

import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
  target: document.getElementById('app'),
});

export default app;

mount is a Svelte 5 API: it takes a component and a DOM target and renders it there. Everything your app does from that point on happens inside the component tree rooted at App.svelte.

Why Vite, specifically

Vite serves your source files directly during development (using native ES modules in the browser) instead of bundling everything up front, so the dev server starts almost instantly regardless of project size. The vite.config.js file registers a small plugin that knows how to compile .svelte files:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
});

That plugin is doing the actual compiler work described in the previous lesson — turning .svelte files into JavaScript — every time Vite processes one.

A note on SvelteKit

If you search for "how to start a Svelte project," you'll also see npx sv create, which scaffolds a SvelteKit app (routing, server rendering, file-based pages) rather than plain Svelte. That's a heavier starting point than you need while learning component fundamentals — the Vite template above is intentionally the smaller, more focused option, and everything you learn with it carries over directly once you do reach for SvelteKit.