DEV Community

Cover image for Self-hosting SvelteKit app - the easy way
kvetoslavnovak
kvetoslavnovak

Posted on

Self-hosting SvelteKit app - the easy way

This is a follow-up to my post Why We Left Vercel and Switched to Self-Hosting.

What is Self-hosting?

SvelteKit is great. Almost every tutorial advises you to use Vercel to deploy and host your app. Vercel is the most convenient way for SvelteKit app, but this also comes with some cons. The main issue is that the pricing scheme may be unpredictable and with growing traffic, your expenses will go up as well.

The solution may be to "rent" a server (or rather a virtual server, aka a VPS - Virtual Private Server). In this case, you pay just a fixed payment. VPSs are actually super cheap and you can get a decent server for less than $5 monthly.

But it's up to you to set up the server.

Preparing your VPS

There are thousands of providers offering affordable VPS - local ones as well as global ones. The biggest ones are Hetzner, Hostinger, DigitalOcean, Vultr, or OVHcloud. It is up to you which one to choose.

VPS providers usually have nice, user-friendly interfaces where you can choose the location of the server and the operating system. I recommend a Linux operating system such as Ubuntu. During this process, it is better not to choose SSH key access, but rather access via username and password. After renting a VPS, you will be provided with an IP address and a password to be able to connect to your VPS. Generally, VPS providers won't give you a username; in that case, the username is "root" for a VPS with a Linux operating system or "Administrator" for a VPS with a Windows operating system.

On your computer, just open the terminal. In the terminal, type ssh your_username@your_vps_ip_address and press Enter.

ssh root@123.45.67.89
Enter fullscreen mode Exit fullscreen mode

You will be prompted to enter the password you were given by the VPS provider. Type your VPS password (it won't show as you type) and press Enter.

You will be prompted about an unknown key and asked to accept it. Type yes and press Enter.

The authenticity of host '123.45.67.89 (123.45.67.89)' can't be established.
ED25519 key fingerprint is SHA256:NTw36MQjDxsHlxC/Xso5yKMlKJu93uYknRx2LEaqk7I.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes 
Enter fullscreen mode Exit fullscreen mode

This will store the fingerprint of the VPS on your computer so that the next time you connect, it is going to validate that fingerprint and you should not see this prompt ever again.

And now you should be connected to your VPS. This means that in your terminal, you are actually logged in and using the VPS itself.

Dokploy

There are several tools that will help you to run applications on your VPS. The most popular ones are Coolify, Dokploy and Caprover. I recommend Dokploy.

The installation is super simple. When logged in to your VPS, type this and hit Enter in your terminal:

curl -sSL https://dokploy.com/install.sh | sh
Enter fullscreen mode Exit fullscreen mode

If everything went okay, you will be given a link where the Dokploy app is available on your VPS. Ctrl-click the link and you will be redirected to the Dokploy registration page. In the browser address bar, you will see that you are on your own server and that you are using the HTTP protocol.

Provide the email and password you wish to use and hit Register.

Domain

I guess you would like to share your app with a proper domain name instead of an IP address. So, I assume you have bought a nice domain name. Go to the website of your domain provider and edit the DNS records like this:
Type: A
Host: @
Value: [your VPS IP address]

You will have to wait a couple of minutes until the DNS record changes propagate.

Go back to your Dokploy user interface, go to Settings > Web Server > Server Domain and enter:

Domain: dokployadmin.[YOURDOMAINNAME e.g. superapp.com]
Let's Encrypt Email: [YOUR EMAIL]
Enable HTTPS: [Checked]
Certificate Provider: Let's Encrypt

You are providing your email here to be notified via email when your SSL certificate is about to expire.

Now, after a minute or so, if you go to the link https://dokployadmin.YOURDOMAINNAME (e.g., https://dokployadmin.superapp.com), you should see the Dokploy sign-in page running on HTTPS.

I would advise changing your Dokploy password now in the Account > Profile section. Before HTTPS was set up, there was a chance that someone listened in on your communication over HTTP.

SvelteKit app changes

Dokploy offers several build types to serve applications:

  • Dockerfile
  • Railpack
  • Nixpacks
  • Heroku Buildpacks
  • Paketo Buildpacks
  • Static

We will use Dockerfile.

There are just a couple of preparation steps for your SvelteKit app.

Add Dockerfile and .dockerignore files in the root of your application.

Your Dockerfile should look like this:

# ---------- Build stage ----------
FROM node:22-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . .
RUN npm run build

# ---------- Run stage ----------
FROM node:22-alpine AS run

WORKDIR /app

ENV NODE_ENV=production
ENV PORT=3000

COPY --from=build /app/package.json ./
COPY --from=build /app/build ./build
COPY --from=build /app/node_modules ./node_modules

EXPOSE 3000

CMD ["node", "build"]

Enter fullscreen mode Exit fullscreen mode

Your .dockerignore should look like this:

# Git files
.git
.gitignore
.gitattributes

# Documentation
README.md

# IDE / editor files
.vscode
.editorconfig

# SvelteKit build/cache
.svelte-kit

# Node modules (we install them in Docker)
node_modules

# Local build output (Docker builds from source)
build

# Config files not needed in container
.prettierrc
.eslintrc.cjs
.graphqlrc
.npmrc

# Environment files (secrets)
**/.env

Enter fullscreen mode Exit fullscreen mode

Install adapter-node

 npm install @sveltejs/adapter-node
Enter fullscreen mode Exit fullscreen mode

Update your svelte.config.js file:

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
  }
};

export default config;
Enter fullscreen mode Exit fullscreen mode

Check your .env file for all environment variables that ARE NOT prefixed with PUBLIC_
Go through all files of your SvelteKit app and update these variable imports and their usage, we won't import them directly but using env object.

// import { PRIVATE_PASSWORD, ..., ... } from '$env/dynamic/private';
import { env } from '$env/dynamic/private'; 
....
// usingsecret(PRIVATE_PASSWORD)
usingsecret(env.PRIVATE_PASSWORD)
Enter fullscreen mode Exit fullscreen mode

Commit these changes to your Github repository.

SvelteKit running in Dockploy

In Dokploy, go to Home > Projects > +Create Project. Choose a name and description. Now we need to use + Create Service > Application. Provide your application name, app name and description. You should see that your empty application was created. Click on it.

As a provider, use GitHub; go through the intuitive process to connect this provider. You should see your GitHub account added. Click the install icon and select the repository you need to deploy to Dokploy.

In the Service section, you should now see that you can select your GitHub account, the repository and the branch. You can also enable the Trigger (automatic redeployment) on pushing changes to your branch (if you want to be super sure, you can also use the Webhook URL from the Dokploy Deployments section and paste it into the GitHub repository Settings > Webhooks).

Hit Save.

Lower down in the Build Type section, choose Dockerfile. In the Dockerfile input, type ./Dockerfile.

Hit Save.

In Domains in the top navigation, click Add Domain and fill in:

Host: www.[YOURDOMAINNAME e.g. superapp.com]
Path: /
Internal Path: /
Container Port: 3000
Enable HTTPS with Let's Encrypt: [Checked]

The last thing we have to do is to go to the Environment section in the top navigation. In Environment Settings as well as Build-time Secrets, add all environment variables that your SvelteKit app uses (which you have in .env file) like this:

PUBLIC_URL = https://........com
PRIVATE_PASSWORD = FDR885dafdafdsafda..........
Enter fullscreen mode Exit fullscreen mode

Now you can go back to the General section of the navigation and click the Deploy button.

And your app should be live!

Detailed Dockploy tutorials

The Dokploy homepage lists several detailed video tutorials, although these are not SvelteKit specific. I especially recommend this one: https://www.youtube.com/watch?v=ELkPcuO5ebo&list=LL&index=4, which goes really deep.

Dokploy is a great tool. For example, you can install PostgreSQL, MySQL, MariaDB, MongoDB, or Redis there. Or you can choose from more than 70 pre-configured templates like Supabase, n8n, Java Runtime, PocketBase and many others.

Top comments (0)