Setup

React has three mainstream starting points: Create React App (now deprecated), Vite with the React plugin, and Next.js for full-stack/SSR work. Svelte mirrors this split almost exactly — Vite + Svelte plugin for SPAs and SvelteKit for full-stack/SSR. If you know the React toolchain you already understand the shape of the Svelte one; the names just changed.

Scaffolding commands

React	Svelte
`npm create vite@latest my-app -- --template react-ts`	`npm create vite@latest my-app -- --template svelte-ts`
`npx create-next-app my-app`	`npx sv create my-app`

The Vite command is identical except for the template name: react-ts → svelte-ts.
npx sv create is the official SvelteKit scaffolder — the direct equivalent of create-next-app. It prompts for TypeScript, ESLint, Prettier, Vitest, and more.

package.json scripts — nearly identical

Because both ecosystems use Vite under the hood, the scripts look almost the same. The only difference is that the React/Vite template runs tsc before vite build as a type-check step.

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Key points:

dev, build, and preview exist in both — muscle memory transfers directly.
Svelte’s Vite plugin runs the Svelte compiler and TypeScript checks together via svelte-check, so there is no separate tsc && prefix needed.
SvelteKit adds a check script (svelte-kit sync && svelte-check) and an optional test script on top of these basics.

Project structure

Both a Vite+Svelte SPA and a SvelteKit project are thin wrappers around familiar patterns:

Vite + Svelte SPA (equivalent to Vite + React):

flowchart TB
  root(["project root"])
  root --> src["src/"]
  src --> main["main.ts — entry point (was main.tsx)"]
  src --> app["App.svelte — root component (was App.tsx)"]
  src --> lib["lib/ — shared components and utilities"]
  root --> indexHtml["index.html"]
  root --> viteConfig["vite.config.ts"]

Vite + Svelte SPA project structure

SvelteKit (equivalent to Next.js):

flowchart TB
  root(["project root"])
  root --> src["src/"]
  src --> routes["routes/ — file-based routing (was app/ or pages/ in Next.js)"]
  routes --> page["+page.svelte — a route's UI"]
  routes --> layout["+layout.svelte — shared layout wrapper"]
  src --> lib["lib/ — shared utilities and components"]
  root --> staticDir["static/ — public assets (was public/)"]
  root --> svelteConfig["svelte.config.js"]
  root --> viteConfig["vite.config.ts"]

SvelteKit project structure

The mental model maps cleanly: src/routes/ in SvelteKit does what app/ (or pages/) does in Next.js. The +page.svelte naming convention is SvelteKit-specific — the + prefix distinguishes framework files from your own helper files.

vite.config.ts — just a different plugin

React and Svelte both configure Vite with a single plugin import:

// React
import react from '@vitejs/plugin-react';
export default { plugins: [react()] };

// Svelte
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default { plugins: [svelte()] };

Everything else — aliases, server options, build targets — is identical Vite config.

Playground note: This is a project scaffolding lesson — there is no runnable in-browser snippet. Run the commands above in your terminal to scaffold a real project.

🔀 React/Next.js setup vs Svelte/SvelteKit setup

SPA scaffold: npm create vite@latest -- --template react-ts → npm create vite@latest -- --template svelte-ts. Same Vite command, different template name.
Full-stack/SSR: npx create-next-app → npx sv create. SvelteKit is the direct Next.js equivalent.
Entry point: src/main.tsx + src/App.tsx → src/main.ts + src/App.svelte.
Routing (full-stack): Next.js uses app/ or pages/ for file-based routing. SvelteKit uses src/routes/ with +page.svelte and +layout.svelte conventions.
Vite plugin: @vitejs/plugin-react → @sveltejs/vite-plugin-svelte. One line changes in vite.config.ts.
TypeScript: Both fully supported out of the box. SvelteKit generates a tsconfig.json automatically via svelte-kit sync.
Scripts: dev / build / preview are identical. React/Vite prefixes build with tsc &&; Svelte uses svelte-check instead.
CRA: Create React App is deprecated with no Svelte equivalent — Vite is the right starting point for both ecosystems today.