Lançado · em melhoria
Guia de SvelteKit · 1/6
Por enquanto, este capítulo está disponível apenas em inglês.
In this chapter you will create a SvelteKit project, start the development server and edit your first page. Along the way we cover editor setup and the everyday commands you will use.
Svelte is a UI framework that compiles components into efficient JavaScript at build time. SvelteKit is the application framework built on top of it: it adds routing, server-side rendering (SSR), data loading, form handling, and building and deploying your app. Vite powers the dev server and the bundling, and SvelteKit itself runs as a Vite plugin. If Next.js is the app framework for React, SvelteKit plays the same role for Svelte.
Check which Node.js version you have installed. If it is older than the minimum SvelteKit requires, download the LTS release from nodejs.org.
node --version
npm --versionProjects are created with sv, the official Svelte command-line tool. There is nothing to install globally; run it through npx.
npx sv create my-app
cd my-app
npm run devsv create asks a few questions:
| Prompt | What it means |
|---|---|
| Template | minimal (an empty app), demo (an app with a small example game), library (a Svelte component library) |
| Type checking | TypeScript (ts) or JSDoc annotations (jsdoc) |
| Add-ons | Prettier, ESLint, Vitest, Playwright, Tailwind CSS, Drizzle and more |
| Package manager | The tool used to install dependencies right away (npm, pnpm, yarn, bun, deno) |
To skip the prompts, pass the options directly. This guide uses TypeScript throughout.
npx sv create my-app --template minimal --types ts --no-add-ons --install npm
# Add integrations later
npx sv add prettier eslint
npx sv add vitest playwrightnpm run dev starts the Vite dev server at http://localhost:5173 by default. When you save a file, hot module replacement (HMR) updates only what changed, without a full page reload.
# Open the browser automatically
npm run dev -- --open
# Expose the server to other devices on your network
npm run dev -- --hostsrc/routes/+page.svelte is the home page (/). Replace its contents with the following and save. $state is a Svelte 5 rune that creates reactive state: whenever the value changes, the UI updates.
<script lang="ts">
let name = $state('SvelteKit');
let count = $state(0);
</script>
<h1>Hello, {name}!</h1>
<input bind:value={name} />
<button onclick={() => count++}>
Clicked {count} times
</button>bind:value creates a two-way binding between the input and the variable, and onclick passes an event handler just like a regular HTML attribute.
Create src/routes/about/+page.svelte with the content below, then add <a href="/about">About</a> to the home page.
<svelte:head>
<title>About</title>
</svelte:head>
<h1>About</h1>
<p>This page lives at /about.</p>
<a href="/">Back home</a>Anything inside <svelte:head> is placed in the document head, so each page can set its own title and meta tags. When you click the link, SvelteKit loads only the code it needs and swaps the page without a full reload. The first request is still rendered to HTML on the server, so search engines see real content.
The scripts section of package.json includes:
| Command | What it does |
|---|---|
npm run dev | Start the dev server |
npm run build | Create a production build (vite build) |
npm run preview | Preview the production build locally |
npm run check | Run svelte-check for type and Svelte diagnostics |
In VS Code, the Svelte for VS Code extension adds syntax highlighting, completion, inline type errors and formatting for .svelte files. Extensions built on the same language server exist for other editors, including JetBrains IDEs, Neovim and Zed. Running npm run check before you commit is a good habit, since it checks the whole project at once.
npx sv create and start it with npm run dev.+page.svelte files inside src/routes, and the folder structure defines the URLs.npx sv add to bring in integrations at any time.
0 comentários
Fazer login · Faça login para deixar um comentário.
Seja o primeiro a comentar.