Deploying Svelte Applications

# CHAPTER 29

Deploying Svelte Applications #

1. Chapter Introduction #

2. Learning Objectives #

• Build a production-optimized Svelte bundle.

• Configure environment variables securely.

• Deploy to Vercel (recommended for SvelteKit).

• Deploy to Netlify.

• Deploy to Firebase Hosting.

• Set up custom domains.

3. Production Build #

# Build for production
npm run build

# Preview the production build locally
npm run preview

Output in /dist:
dist/
├── index.html
├── assets/
│   ├── index-abc123.js     ← Your compiled Svelte code (minified)
│   └── index-def456.css    ← Compiled CSS

4. Environment Variables #

# .env (NOT committed to git)
VITE_API_URL=https://api.myapp.com
VITE_FIREBASE_API_KEY=your_key_here

# .env.example (committed to git — template for others)
VITE_API_URL=
VITE_FIREBASE_API_KEY=

// Access in Svelte components
const apiUrl = import.meta.env.VITE_API_URL;
const mode = import.meta.env.MODE; // 'development' or 'production'
const isDev = import.meta.env.DEV;

5. SvelteKit Adapters #

# For Vercel
npm install @sveltejs/adapter-vercel

# For Netlify
npm install @sveltejs/adapter-netlify

# For static sites (GitHub Pages, Firebase Hosting)
npm install @sveltejs/adapter-static

# Auto-detect (good for most platforms)
npm install @sveltejs/adapter-auto

import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter()
  }
};

6. Deploying to Vercel #

Method 1: Vercel CLI

npm install -g vercel
vercel login
vercel          # Follow prompts
vercel --prod   # Deploy to production

Method 2: GitHub Integration (recommended)

1. 1. Push your project to GitHub.

1. 2. Go to vercel.com → New Project.

1. 3. Import from GitHub.

1. 4. Vercel auto-detects SvelteKit.

1. 5. Add environment variables in Vercel dashboard.

1. 6. Click Deploy — live in ~60 seconds!

Every git push to main auto-deploys!

7. Deploying to Netlify #

npm install -g netlify-cli
netlify login
npm run build
netlify deploy --dir=dist --prod

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

GitHub Integration:

1. 1. Push to GitHub.

1. 2. Go to app.netlify.com → New site from Git.

1. 3. Select your repo.

1. 4. Build command: npm run build, Publish dir: dist.

1. 5. Add environment variables in Netlify settings.

8. Deploying to Firebase Hosting #

npm install -g firebase-tools
firebase login
firebase init hosting

# Select 'dist' as public directory
# Configure as SPA: Yes

npm run build
firebase deploy --only hosting

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      { "source": "**", "destination": "/index.html" }
    ]
  }
}

9. CI/CD with GitHub Actions #

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: { node-version: '18' }
      - run: npm ci
      - run: npm run build
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

10. Performance Checklist for Production #

✅ npm run build (production mode)
✅ Environment variables set in hosting dashboard
✅ Images optimized (WebP format)
✅ Lazy load heavy components
✅ Enable gzip/brotli on host (usually auto)
✅ Set Cache-Control headers for assets
✅ Custom domain configured
✅ HTTPS enabled (all major hosts auto-provide)

11. MCQs #

12. Interview Questions #

• Q: What is a SvelteKit adapter and why is it needed for different deployment targets?

• Q: How do you securely manage API keys in a Svelte application?

13. Summary #

14. Next Chapter Recommendation #