SvelteKit

SvelteKit combines Svelte’s component model with server-side rendering, routing, and adapters. Use this component when you need a fast Svelte frontend that can fetch data server-side or run API endpoints. Diploi runs the build and deployment steps so your project ships with predictable infrastructure.

Add to your project

Paste this entry into the components list in diploi.yaml to add SvelteKit to your project.

components:
  - name: SvelteKit
    identifier: sveltekit
    package: https://github.com/diploi/component-sveltekit#v2.70.3

If the folder of the component in your repository is not named sveltekit, add a folder parameter with the name of the folder.
Import the environment variables of add-ons, such as a database, into the component with env.include in diploi.yaml:

components:
  - name: SvelteKit
    identifier: sveltekit
    package: https://github.com/diploi/component-sveltekit#v2.70.3
    env:
      include:
        - postgres.*

SvelteKit reference

Readme

Launch a trial, no account needed https://diploi.com/component/sveltekit

Uses the official node Docker image.

Has the @sveltejs/adapter-node adapter preconfigured. SvelteKit options, such as the adapter, are passed to the sveltekit() plugin in vite.config.ts, so the project has no svelte.config.js.

Operation

Getting started

In the Dashboard, click Create Project +
Under Pick Components, choose SvelteKit

You can add other frameworks from this page if you want to build a monorepo application, eg, SvelteKit for the frontend and Hono for the backend.
In Pick Add-ons, select any databases or extra tools you need.
Choose Create Repository so Diploi generates a new GitHub repo for your project.
Click Launch Stack

Prefer the full guide? Check https://diploi.com/blog/hosting_svelte_apps

Package managers

Supports Bun, Yarn, npm, and pnpm. The package manager is auto-detected from your lockfile (bun.lock, yarn.lock, package-lock.json, or pnpm-lock.yaml). The install and build steps always use the detected package manager.

Development

When the component is first initialized, dependencies are installed using the detected package manager. The development server is then started with:

npm run dev -- --host

This can be changed with the containerCommands.developmentStart field in diploi.yaml.

Production

Builds a production ready image. Image runs npm install & npm run build when being created, using the detected package manager. Once the image runs, npm start is called, which serves the adapter-node build from build/.

This can be changed with the containerCommands.productionStart field in diploi.yaml.

ENV

SvelteKit has separate modules for environment variables that are read when the app is built, and ones that are read when it runs:

$env/static/private and $env/static/public are replaced during the build step. Only use them for values that are not deployment-dependent, and define those in diploi.yaml using the static import syntax. The values are exposed to the Dockerfile as ARG variables.
$env/dynamic/private and $env/dynamic/public are read when the server runs. Use them for values that depend on a specific deployment, such as variables imported from other components in diploi.yaml, or configured in the Environment tab.

Public variables need the PUBLIC_ prefix to be available in the browser.

Ports

The component serves on port 3000 in both development and production. If you change it, update all of these so they stay in sync:

hosts[].port in diploi.yaml
EXPOSE and ENV PORT in Dockerfile and Dockerfile.dev
The fallback of server.port in vite.config.ts, which the development server uses when PORT is not set