Svelte Deployment

Deployment means moving your finished project from your own computer onto a server where visitors can reach it through the internet. A Svelte or SvelteKit project needs a build step before this move happens.

Why Deployment Needs A Build Step

The files you write during development are not the same files a server should host. A build step compiles your source code into optimized files, ready for fast loading by real visitors rather than by a local development server on your own machine.

Building Your Project

npm run build

This command reads through your entire project and produces a finished set of files, usually placed inside a folder named build or .svelte-kit depending on your setup. These finished files run faster and smaller than the raw source code.

Deployment Flow Diagram

Your Computer                     Hosting Server
------------------                 ------------------
Source code (src folder)
        |
        v
   npm run build
        |
        v
Finished output files    -------->   Uploaded to server
                                          |
                                          v
                                  Visitors load your site

Choosing An Adapter

SvelteKit uses an adapter to prepare your build output for a specific hosting platform. Different platforms expect files in slightly different formats, and an adapter handles this translation automatically.

// svelte.config.js
import adapter from "@sveltejs/adapter-auto";

export default {
  kit: {
    adapter: adapter()
  }
};

The adapter-auto package detects common hosting platforms automatically and configures the build output to match, saving you from picking a specific adapter by hand in simple cases.

Common Hosting Options

Static hosting platforms, suited for sites without server-side logic
Serverless platforms, which run small pieces of server code on demand
Traditional Node.js hosting, running a full server continuously

A simple portfolio site often works well with static hosting, since every page can be pre-built ahead of time. A site with live user accounts and personalized data often benefits from serverless or Node.js hosting instead, since these platforms run logic for each individual visitor request.

Environment Variables During Deployment

Sensitive values, such as an API key, belong in environment variables rather than directly inside your source code. Most hosting platforms offer a settings panel for entering these values securely, keeping them separate from the code stored in your project files.

A Simple Deployment Checklist

Test your project thoroughly using the local dev server first
Run the build command and check for any errors it reports
Choose an adapter that matches your chosen hosting platform
Set any required environment variables on the hosting platform
Upload or connect your project repository to the hosting platform

Key Points

A build step compiles source code into optimized files ready for hosting
An adapter prepares SvelteKit's build output for a specific platform
Static, serverless, and Node.js hosting each suit different project needs
Sensitive values belong in environment variables, not directly in code

Previous lesson

Back to course