Skip to content
Back to Deployment

Deploying Svelte Apps

Compile Svelte components to vanilla JS with Vite and deploy minimal static bundles to any host.

PlatformsBeginner

Why

Svelte compiles away the framework runtime, producing bundles 10-50% smaller than React/Vue. The lack of virtual DOM and minimal runtime means faster loads on slow devices and lower bandwidth costs.

Platform-as-a-Service adoption grew 24% in 2024 as teams shift from VM management to git-push deploys. the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research), and PaaS layers capture the majority of new workloads.

When

Choose Svelte for performance-critical SPAs, embedded widgets, and low-bandwidth audiences. Use SvelteKit when routing, SSR, or adapters are needed.

How

1. Build — npm run build outputs dist/ with index.html + bundled JS/CSS 2. SPA fallback — svelte-spa-router uses hash routing by default (no server config) 3. Deploy — upload dist/ to any static host 4. Vite config — customize base, target, minify 5. Env vars — import.meta.env.VITE_* at build time 6. No SSR — for SSR use SvelteKit with appropriate adapter

Example

// vite.config.ts import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; export default defineConfig({ plugins: [svelte()], build: { target: "es2020", minify: "esbuild" }, }); // App.svelte — component compiles to vanilla JS <script> let count = 0; </script> <button on:click={() => count++}>{count}</button> // package.json { "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } } // Deploy: npm run build && npx wrangler pages deploy dist

Common Problems

  • ⚠Using Svelte routing without SvelteKit — no SSR, no file-based routing, limited to SPA
  • ⚠Build fails on older browsers — target too high (es2022), lower to es2017 for compatibility
  • ⚠CSS not extracted — Vite inline styles by default, configure build.cssCodeSplit for large apps

Best Practices

  • ✓Use SvelteKit for anything beyond a single-page widget — it handles routing, SSR, and adapters
  • ✓Enable vite-plugin-svelte preprocess for TypeScript and SCSS for better DX
  • ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit

FAQ