---
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-10-02T17:46:31.225Z"
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 on `localhost:5173`, but nobody can receive a powder alert from your laptop. Deploy it to Vercel so it has a public URL and a production runtime.

## Outcome

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

Use Node.js 24 for this course. SvelteKit 3 requires Node.js 22.17 or newer, Svelte 5.57.1 or newer, TypeScript 6, Vite 8, and `@sveltejs/vite-plugin-svelte` 7. The starter uses `@sveltejs/adapter-vercel` 7.

## 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@latest create my-app
```

That scaffolds a project with TypeScript, ESLint, and your choice of styling. The course starter also includes UI components, resort data, a weather service, and alert schemas so you can focus on the Vercel integration.

## 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.

SvelteKit 3 keeps its configuration in the `sveltekit()` plugin options in `vite.config.ts`. There is no separate `svelte.config.js` file. The starter app has the adapter wired up:

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

export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit({ adapter: adapter({ runtime: 'nodejs24.x' }) })
  ]
});
```

And the dependency is in `package.json`:

```json title="package.json" {3}
{
  "devDependencies": {
    "@sveltejs/adapter-vercel": "^7.0.0",
    "@sveltejs/kit": "^3.0.0",
    "@sveltejs/vite-plugin-svelte": "^7.3.1",
    "svelte": "^5.57.1",
    "svelte-check": "^4.7.6",
    "typescript": "^6.0.0",
    "vite": "^8.3.2"
  }
}
```

## 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 deployment log:**

   Check that Vercel runs `vite build` with Vite 8, completes the client and server bundles, and finishes the Vercel adapter step without errors. Module counts, output filenames, sizes, and build times vary by commit.

## 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 includes the adapter configuration and local imports shown below.

**1. Adapter installed and configured:**

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

export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit({ adapter: adapter({ runtime: 'nodejs24.x' }) })
  ]
});
```

**2. TypeScript and local imports:**

The starter's `tsconfig.json` extends `$app/tsconfig`. Run `npm run check` to generate SvelteKit's route types and check the app.

SvelteKit 3 uses Node subpath imports for local modules. The starter declares them in `package.json`:

```json title="package.json"
{
  "imports": {
    "#lib": "./src/lib/index.ts",
    "#lib/*": "./src/lib/*"
  }
}
```

Use explicit extensions when importing these modules, for example `import { resorts } from '#lib/data/resorts.ts'`. Components keep their `.svelte` extension. This replaces the `$lib` imports used in SvelteKit 2 examples. See the [SvelteKit 3 migration guide](https://svelte.dev/docs/kit/migrating-to-sveltekit-3) if you are bringing an existing app.

**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)