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:

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:

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:

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

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

2. Build pipeline:

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.

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.