Skip to content

Run a SvelteKit app

In this guide we create and deploy a SvelteKit app. SvelteKit is built on Svelte, a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser.

To run this example, follow these steps:

  1. Install the kraft CLI tool and a container runtime engine, e.g. Docker.

  2. Clone the examples repository and cd into the examples/node21-sveltekit/ directory:

Terminal window
git clone https://github.com/kraftcloud/examples
cd examples/node21-sveltekit/

Make sure to log into Unikraft Cloud by setting your token and a metro close to you. We use fra0 (Frankfurt, πŸ‡©πŸ‡ͺ) in this guide:

Terminal window
# Set Unikraft Cloud access token
export UKC_TOKEN=token
# Set metro to Frankfurt, DE
export UKC_METRO=fra0

When done, invoke the following command to deploy the application on Unikraft Cloud:

Terminal window
kraft cloud deploy -p 443:3000 -M 256 .

The output shows the instance URL and other details:

Terminal window
[●] Deployed successfully!
β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ name: node21-sveltekit-zmt39
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ uuid: cd5071b0-5605-4771-b75d-4789393e60de
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€ state: running
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ url: https://dark-fog-z18n0ej1.fra0.kraft.host
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€ image: node21-sveltekit@sha256:4cea210aef3513bd68490640b511ebcff2b867e9222028b9938faccffc21cb83
β”œβ”€β”€β”€β”€β”€ boot time: 72.86ms
β”œβ”€β”€β”€β”€β”€β”€β”€β”€ memory: 256 MiB
β”œβ”€β”€β”€β”€β”€β”€β”€ service: dark-fog-z18n0ej1
β”œβ”€β”€ private fqdn: node21-sveltekit-zmt39.internal
β”œβ”€β”€β”€β”€ private ip: 172.16.3.3
└────────── args: /usr/bin/node /app/build/index.js

In this case, the instance name is node21-sveltekit-zmt39 and the URL is https://dark-fog-z18n0ej1.fra0.kraft.host. They are different for each run.

Use curl to query the Unikraft Cloud instance:

Terminal window
curl https://dark-fog-z18n0ej1.fra0.kraft.host
<!doctype html>
<html lang="en">
[...]
<body data-sveltekit-preload-data="hover">
[...]

Or even better, point a browser at it πŸ˜€ This will get you to play with the SvelteKit demo app.

At any point in time, you can list information about the instance:

Terminal window
kraft cloud instance list
NAME FQDN STATE CREATED AT MEMORY ARGS BOOT TIME
node21-sveltekit-zmt39 dark-fog-z18n0ej1.fra0.kraft.host running 5 minutes ago node21-sveltekit@sha256:4cea210ae... 256 MiB /usr/bin/node /app/build/index.js 72.86 ms

When done, you can remove the instance:

Terminal window
kraft cloud instance remove node21-sveltekit-zmt39

Customize your Application

To customize the application, update the files in the repository. That is, you update the SvelteKit / Node / npm-specific files, or the Unikraft Cloud-specific files. We detail each below.

Updating the SvelteKit Application

Updating the SvelteKit application is reliant on making npm-related updates.

npm is a package manager for Node. It is used to install dependencies for Node applications. npm uses a package.json file to list required dependencies (with versions).

The application files were generated using npm create svelte@latest, and by making use of the @sveltejs/adapter-node adapter.

The core implementation is located in src/routes/sverdle/ directory. Detailed information on updating the implementation is part of the official SvelteKit documentation.

Updates to the implementation will probably require updates to the package.json file. The package.json file lists npm application dependencies.

Deploying Locally

Before deploying the SvelteKit application on Unikraft Cloud, you can deploy locally. Assuming npm is installed, use the following commands:

Terminal window
npm install
npm run dev
VITE v5.2.6 ready in 807 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help

You can test the application locally by pointing your browser to http://localhost:5173/.

Updating the Unikraft Cloud Specification

Updates to the Unikraft Cloud specification are driven by updates to the SvelteKit application. There are two specification files:

  • Kraftfile: the Unikraft Cloud specification
  • Dockerfile: the Docker-specified application filesystem

Current Contents

Their current contents are:

spec: v0.6
runtime: node:21
rootfs: ./Dockerfile
cmd: ["/usr/bin/node", "/app/build/index.js"]

Lines in the Kraftfile have the following roles:

  • spec: v0.6: The current Kraftfile specification version is 0.6.

  • runtime: node:21: The Unikraft runtime kernel to use is Node 21.

  • rootfs: ./Dockerfile: Build the application root filesystem using the Dockerfile.

  • cmd: [["/usr/bin/node", "/app/build/index.js"]]: Use /usr/bin/node /app/build/index.js as the starting command of the instance.

Lines in the Dockerfile have the following roles:

  • FROM node:21-alpine AS deps: Use the base image of the node:21-alpine container. This provides the npm binary and other Node-related components. Name the current image deps.

  • WORKDIR /app: Use /app as working directory. All other commands in the Dockerfile run inside this directory.

  • COPY package.json /app: Copy the npm configuration file to be able to install dependencies.

  • RUN npm install: Install npm components listed in packages.json.

  • FROM deps AS build: Create a fresh checkpoint of the base image for the build phase.

  • COPY . /app: Copy contents of the current directory (the actual application files) in the Docker filesystem. Note that paths in the .dockerignore file are not copied.

  • RUN npm run build; ...: Build the files required for running the application standalone. The application entry point is the resulting /app/build/index.js file that’s used as the start command in the Kraftfile. In order to run the application, it has to be configured as a module.

  • FROM scratch as prod: Use the scratch empty container` as the actual runtime environment. It will only contain the required files from the build.

  • COPY --from=build ...: Copy existing files from new build image to the scratch-based image. This means the application build directory (/app/build) and the required dependencies (/app/node_modules).

Customization Options

It is unlikely you will have to update the Kraftfile. The only potential update is the cmd option. But since the /app/build/index.js file is generated by SvelteKit / npm, it is unlikely to be updated.

The Dockerfile is also unlikely to be modified. Updates to the application would be part of the package.json file or the src/ directory. And updating these won’t affect the contents of the Dockerfile. Still, if required, applications may require extending the Dockerfile with additional Dockerfile commands.

Learn More

Use the --help option for detailed information on using Unikraft Cloud:

Terminal window
kraft cloud --help

Or visit the CLI Reference.