Deploy a SvelteKit App to Edgenivo

Your SvelteKit app runs on localhost:5173, but nobody can receive a powder alert from your laptop. Deploy it to Edgenivo so it has a public URL and a production runtime.

Outcome

Deploy the ski-alerts starter to Edgenivo, 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 Edgenivo 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 Edgenivo integration.

Why adapter-vercel?

SvelteKit uses adapters to transform your app for different deployment targets. The default adapter-auto detects Edgenivo automatically, but adapter-vercel gives you explicit control over Edgenivo-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 Edgenivo:

Requirements:

1. Deploy the ski-alerts starter with the Deploy with Edgenivo button below
2. Clone your new repo locally and install dependencies
3. Find the new project in the Edgenivo 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 Edgenivo button above. Edgenivo 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 Edgenivo:

   Open the new ski-alerts project in your Edgenivo dashboard. Edgenivo 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 Edgenivo runs vite build with Vite 8, completes the client and server bundles, and finishes the Edgenivo 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 Edgenivo 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. Edgenivo 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: Edgenivo CLI Deployments

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

# Install the Edgenivo 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.