Verwenden Sie sv create my-app, um ein SvelteKit-Projekt mit der SvelteKit-CLI zu erstellen. Beantwort Sie die Eingabeaufforderungen, um eine Vorlage auszuwählen und Ihre Entwicklungsumgebung einzurichten.

bunx sv create my-app

┌  Welcome to the Svelte CLI! (v0.5.7)
│
◇  Which template would you like?
│  SvelteKit demo
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project?
│  none
│
◇  Which package manager do you want to install dependencies with?
│  bun
│
◇  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd my-app                                                            │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: bun run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

---

Sobald das Projekt initialisiert ist, wechseln Sie mit cd in das neue Projekt. Sie müssen bun install nicht ausführen, da die Abhängigkeiten bereits installiert sind.

Starten Sie dann den Entwicklungsserver mit bun --bun run dev.

Um den Entwicklungsserver mit Node.js anstelle von Bun auszuführen, können Sie das --bun-Flag weglassen.

cd my-app
bun --bun run dev

  $ vite dev
  Forced re-optimization of dependencies

    VITE v5.4.10  ready in 424 ms

    ➜  Local:   http://localhost:5173/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help

---

Besuchen Sie http://localhost:5173 in einem Browser, um die Template-App zu sehen.

---

Wenn Sie src/routes/+page.svelte bearbeiten und speichern, sollten Sie Ihre Änderungen im Browser hot-reloaded sehen.

---

Um für die Produktion zu bauen, müssen Sie den richtigen SvelteKit-Adapter hinzufügen. Derzeit empfehlen wir

bun add -D svelte-adapter-bun.

Nehmen Sie nun die folgenden Änderungen an Ihrer svelte.config.js vor.

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://svelte.dev/docs/kit/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
    adapter: adapter(),
  },
};

export default config;

---

Um ein Produktions-Bundle zu erstellen:

bun --bun run build

  $ vite build
  vite v5.4.10 building SSR bundle for production...
  "confetti" is imported from external module "@neoconfetti/svelte" but never used in "src/routes/sverdle/+page.svelte".
  ✓ 130 modules transformed.
  vite v5.4.10 building for production...
  ✓ 148 modules transformed.
  ...
  ✓ built in 231ms
  ...
  ✓ built in 899ms

  Run npm run preview to preview your production build locally.

  > Using svelte-adapter-bun
    ✔ Start server with: bun ./build/index.js
    ✔ done