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:

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:

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:

{
  "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 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 and click Fork. Then clone your fork:

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

2. Run locally to make sure it works:

   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 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:

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:

{
  "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 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.

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

Troubleshooting

Advanced: Vercel CLI Deployments

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

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