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

Deploy the ski-alerts starter to Vercel, then clone it and run it locally with SvelteKit 3.

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. Deploy the starter with the Deploy with Vercel button
2. Clone your new repo, install dependencies, and verify the app runs locally
3. 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. Deploy the ski-alerts starter with the Deploy with Vercel button below
2. Clone your new repo locally and install dependencies
3. Find the new project in the Vercel dashboard

Implementation hints:

• The button copies the starter into a new ski-alerts repo in your GitHub account, 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. Deploy and clone:

   Click the Deploy with Vercel button above. Vercel copies the starter into a new ski-alerts repo in your GitHub account and deploys it. Then clone your repo:

   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. Find the project in Vercel:

   Open the new ski-alerts project in your Vercel dashboard. Vercel detected SvelteKit automatically and configured the build settings.

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 ski-alerts repo 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. Deploy and clone:

Deploy the starter with the button, clone your new repo, and install dependencies. 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.