---
title: "Deploy to Vercel"
description: "Configure and deploy a SvelteKit application to Vercel with the correct adapter settings and build configuration."
canonical_url: "https://vercel.com/academy/svelte-on-vercel/deploy-svelte-to-vercel"
md_url: "https://vercel.com/academy/svelte-on-vercel/deploy-svelte-to-vercel.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-11T06:07:05.944Z"
content_type: "lesson"
course: "svelte-on-vercel"
course_title: "Svelte on Vercel"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Deploy to Vercel

# Deploy a SvelteKit App to Vercel

Your SvelteKit app runs fine on `localhost:5173`. But nobody's getting a powder alert from your laptop. Let's get this thing deployed so it's reachable from the real world.

## Outcome

Fork the ski-alerts starter, run it locally, and deploy it to Vercel.

## Fast Track

1. Fork and clone the starter repo from GitHub
2. Install dependencies and verify the app runs locally
3. Import the project into Vercel and verify your `.vercel.app` URL

## How You'd Start from Scratch

If you were building a brand new SvelteKit app, you'd run:

```bash
npx sv create my-app
```

That scaffolds a project with TypeScript, ESLint, and your choice of styling. For this course, we've already done that and added the UI components, resort data, weather service, and alert schemas you'll build on. The starter is your starting line so you can focus on the Vercel-specific parts.

## Why adapter-vercel?

SvelteKit uses adapters to transform your app for different deployment targets. The default `adapter-auto` detects Vercel automatically, but `adapter-vercel` gives you explicit control over Vercel-specific features like ISR and runtime selection that you'll use throughout this course.

The starter app already has this wired up:

```javascript title="svelte.config.js"
import adapter from '@sveltejs/adapter-vercel';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;
```

And the dependency is in `package.json`:

```json title="package.json" {3}
{
  "devDependencies": {
    "@sveltejs/adapter-vercel": "^6.3.3",
    "@sveltejs/kit": "^2.50.1"
  }
}
```

## Hands-on exercise 1.1

Get the ski-alerts starter running locally and deployed to Vercel:

**Requirements:**

1. Fork the [ski-alerts starter repo](https://github.com/vercel-labs/ski-alerts) on GitHub
2. Clone your fork locally and install dependencies
3. Import the project into Vercel from the dashboard

**Implementation hints:**

- Fork the repo first so you own the copy. You'll push changes to it throughout the course
- The app loads the conditions dashboard even without an API key because the weather service uses the free Open-Meteo API
- The chat feature won't work yet (you'll add the API key in the next lesson)

## Try It

1. **Fork and clone:**

   Go to [github.com/vercel-labs/ski-alerts](https://github.com/vercel-labs/ski-alerts) and click **Fork**. Then clone your fork:

   ```bash
   git clone https://github.com/<your-username>/ski-alerts.git
   cd ski-alerts
   npm install
   ```

2. **Run locally to make sure it works:**

   ```bash
   npm run dev
   ```

   Open `http://localhost:5173`. You should see the conditions dashboard with weather data for 5 ski resorts.

3. **Deploy to Vercel:**

   Go to [vercel.com/new](https://vercel.com/new) and click **Add New Project**. Select your `ski-alerts` fork from the list of repositories. Vercel detects SvelteKit automatically and configures the build settings. Click **Deploy**.

4. **Visit your production URL:**
   ```
   https://ski-alerts-xxxxx.vercel.app
   ```
   You should see the same conditions dashboard, now live on the internet.

5. **Verify the build output in the deployment log:**
   ```
   $ vite build
   vite v7.3.1 building SSR bundle for production...
   ✓ 42 modules transformed.
   .svelte-kit/output/server/index.js   12.34 kB
   ✓ built in 1.2s
   ```

## Done-When

- [ ] You have a fork of ski-alerts in your GitHub account
- [ ] The app runs locally on `localhost:5173`
- [ ] Project is imported in the Vercel dashboard
- [ ] Build completes without errors
- [ ] Conditions dashboard loads at your `.vercel.app` URL with live weather data

## Solution

The starter app is already configured correctly. The key pieces:

**1. Adapter installed and configured:**

```javascript title="svelte.config.js"
import adapter from '@sveltejs/adapter-vercel';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;
```

**2. Build pipeline:**

```javascript title="vite.config.ts"
import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [tailwindcss(), sveltekit()]
});
```

**3. Fork, clone, and deploy:**

Fork the repo on GitHub, clone it, install dependencies, and import the project into Vercel from the dashboard. Vercel detects SvelteKit, runs `vite build`, and deploys your app.

```bash
git clone https://github.com/<your-username>/ski-alerts.git
cd ski-alerts
npm install
```

## Troubleshooting

\*\*Warning: 404 after deploy\*\*

Check that the Framework Preset is set to **SvelteKit** in your Vercel project settings under **Settings → General → Framework Preset**. If Vercel doesn't auto-detect it, the build output won't be structured correctly.

\*\*Warning: Build fails with 'adapter not found'\*\*

Make sure `@sveltejs/adapter-vercel` is in `devDependencies`, not `dependencies`. SvelteKit adapters are build-time tools.

## Advanced: Vercel CLI Deployments

You can also deploy from the command line instead of the Vercel dashboard:

```bash
# Install the Vercel CLI
npm i -g vercel

# Deploy (first time will prompt for project setup)
vercel

# Deploy to production
vercel --prod
```

The CLI is useful for testing deployments before pushing to your main branch.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)