Deploying a Svelte App

Svelte is a modern JavaScript framework for building fast, reactive user interfaces. Unlike traditional frameworks, Svelte compiles your code to highly efficient JavaScript at build time, resulting in smaller bundles and excellent performance.

This guide explains how to deploy a Svelte application to Klutch.sh, both with and without a Dockerfile. It covers installation, sample code, and deployment steps.

Prerequisites

• Node.js & npm installed (Download)
• Git and GitHub account
• Klutch.sh account

---

Getting Started: Create a Svelte App

1. Create a new Svelte app using Vite (recommended):

   npm create vite@latest my-svelte-app -- --template svelte
   cd my-svelte-app
   npm install

2. Start the development server:

   npm run dev

   Your app should be running at http://localhost:5173.

Sample Code (src/App.svelte)

Replace the contents of src/App.svelte with:

<script>
  // No script needed for this example
</script>

<main>
  <h1>Hello from Svelte on Klutch.sh!</h1>
</main>

<style>
h1 { color: #ff3e00; }
</style>

---

Deploying Without a Dockerfile

Svelte apps built with Vite are static sites after build. Klutch.sh can deploy static sites directly.

1. Push your Svelte app to a GitHub repository.
2. Log in to Klutch.sh.
3. Create a new project.
4. Create a new app:
   • Select your Svelte GitHub repository and branch
   • Choose “Static Site” as the app type
   • Set build command: npm run build
   • Set output directory: dist
   • Configure region, compute, and environment variables as needed
5. Click “Create” to deploy. Klutch.sh will build and serve your static Svelte app.

---

Deploying With a Dockerfile

If you need custom server logic or want to use a Dockerfile:

1. Add a Dockerfile to your project root. Example:

   # Build stage
   FROM node:20-alpine AS builder
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build
   
   # Production stage
   FROM nginx:alpine
   COPY --from=builder /app/dist /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]

2. Push your code (with Dockerfile) to GitHub.
3. In Klutch.sh, create a new app and select the Dockerfile option when prompted.
4. Set service details and environment variables as needed.
5. Click “Create” to deploy. Klutch.sh will build your Docker image and serve your Svelte app via Nginx.

---

Resources

• Klutch.sh Documentation
• Svelte Documentation
• Vite Documentation

---

Deploying Svelte to Klutch.sh is fast and flexible. Use static site deployment for most cases, or Dockerfile for custom setups.