DEV Community

Matthias Andrasch
Matthias Andrasch

Posted on • Edited on

Deploy SvelteKit with SSR on Coolify (Hetzner VPS)

This is my first quick try deploying SvelteKit with the open source software Coolify.

Coolify is an "open-source & self-hostable Heroku / Netlify / Vercel alternative". It is developed by Andras Bacsai.

The advantage of Coolify compared to other awesome server management tools like ploi.io (SvelteKit ploi.io tutorial), Cleavr or Laravel Forge is that you can install it directly on your VPS without additional subscription costs. This is especially great for low budget or small hobby projects.

My demo specs:

Update: ARM might be a faster choice.

Install selfhosted Coolify on Hetzner VPS

Just create a new CPX11 cloud server on hetzner, connect via SSH (ssh root@your-server-ip) and run the command from https://coolify.io/self-hosted:

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

That's really it. After install, you can create your admin user via http://your-vps-server-ip:8000/. See this slightly older YouTube video for full example: https://www.youtube.com/watch?v=Jg6SWqyvYys

Prepare the SvelteKit demo app

You can also use my demo repository: https://github.com/mandrasch/sveltekit-demo-app-adapter-node

Create a git repository, use the official SvelteKit installer, select demo app when asked: npm create svelte@latest . Install dependencies via npm i.

Important: Install adapter-node via npm i -D @sveltejs/adapter-node and switch from adapter-auto to adapter-node in svelte.config.js:

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter()
    }
};
Enter fullscreen mode Exit fullscreen mode

This is needed for SSR support on Coolify. See SvelteKit docs for more information on adapter-node: https://kit.svelte.dev/docs/adapter-node

Commit and push all your changes to your GitHub repository.

Create a new project in Coolify

Let's get the party started by creating a new project:

Image description

Select production:

Image description

Add a new resource:

Image description

Select "public repository":

Image description

Select localhost and destination, there is only one option to select anyway ;-)

Image description

Image description

Paste your repository URL, I used my repository https://github.com/mandrasch/sveltekit-demo-app-adapter-node:

Image description

Click "check" and continue with these default settings:

Image description

Now we configure the install, build and start command. Use the following commands:

  • Install: npm ci
  • Build: npm run build
  • Start: node build

Image description

Important: Don't forget to hit "Save" (!)

Image description

You could also use npm ci --omit dev, but that only works if you really don't need any of your dev dependencies. See SvelteKit docs for more information: https://kit.svelte.dev/docs/adapter-node

Switch to https and set ORIGIN

The deployment with http:// would be okay, but two important things are missing:

  • https support, otherwise cookies won't work
  • setting the ORIGIN (via environment variables)

For https, just switch the temporary sslip.io domain to https:// and hit 'Save'(!):

Image description

Now we need to set the ORIGIN, otherwise SvelteKit can't really detect its own domain - this will likely cause Cross-site POST form submissions are forbidden errors.

Important: The node-adapter docs state that you can use ORIGIN=... node build as start command, but this did not work on Coolify (guess because of Docker).

Instead add a new env variable here (!):

Image description

Image description

Now it's time for the first deployment, just hit the "Deploy" button and use "Show debug logs" for all information:

Image description

Don't get confused by red error messages, I guess these are false positives:

Image description

After this is finished, the status in Coolify should switch to "Running" and you should able to play Sverdle (which is implemented via SSR) on your newly created site 🎉

Image description

Add swap space to prevent "out of memory"

I sometimes ran into "502 Bad Gateway" and 200% CPU load after hitting "Deploy" - while I had other (PHP + MySQL) resources running on my Coolify instance. I asked the Coolify Developer on GitHub and he gave me multiple suggestions.

I decided to try the swap option - Swap is disabled by default on Hetzner VPS (see: reddit discussion)

I followed this guide (for ubuntu) and added 6GB swap space (since I only had 17G left on my small VPS) https://www.digitalocean.com/community/tutorial-collections/how-to-add-swap-space.

Multiple projects running + builds at the same time now seem to work fine now. 🎉

Connect a real domain

You can set the domain of your coolify instance in Settings, just point an A-Record to your servers IP.

Image description

You can also point *.my-coolify-server.example.com to your server and use this as wildcard for project URLs.

Let's encrypt HTTPS certificates are managed automatically by Coolify - but only if your domain is in "Domains", see below.

Use www- and non-www domain / redirect

If you want to use both www and non-www domain, you need to set them both here - otherwise the letsencrypt certificate is not generated for both variants.

Here I use two domains and redirect www- to non-www:

Image description

Don't forget to hit the "Set direction" button as well. See this for more information: https://coolify.io/docs/knowledge-base/traefik/redirects

See Coolify requirements for more information. The good thing is that you can always upscale/downscale the resources for Hetzner Cloud VPS (as far as I know).

Have fun with selfhosting!

Disclaimer: If you want to use this setup in production, please take measures to secure your VPS like adding a firewall on hetzner. See e.g. 5 Easy Steps to Secure your Cloud Server 🔒.

Docs and more resources**

Top comments (10)

Collapse
 
ufeindt profile image
Ulrich Feindt

Thanks for the guide. I run into an error where no npm packages got install. This was because the SvelteKit app I had created had all depencies as dev dependencies. I fixed it by changing the install command to just npm ci.

Collapse
 
digitaldrreamer profile image
Abdullah Bashir

Hey @mandrasch
Thanks for posting this. I tried deploying my sveltekit app on my new coolify instance, but I keep getting these error. It's been a tiring day so far. I'd appreciate any help I could get:
Error: UndefinedVar: Usage of undefined variable '$NIXPACKS_PATH' (line 18)

Error 1

Error 2

Log:

#13 4.916 npm notice
2025-Jan-13 11:26:59.713323
#13 ERROR: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1
2025-Jan-13 11:26:59.713323
------
2025-Jan-13 11:26:59.713323
 > [stage-0  9/11] RUN --mount=type=cache,id=wwwkcck0g84gg0cwosk4gc80-node_modules/cache,target=/app/node_modules/.cache npm run build:
2025-Jan-13 11:26:59.713323
4.895     at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
2025-Jan-13 11:26:59.713323
4.895     at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
2025-Jan-13 11:26:59.713323
4.895     at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
2025-Jan-13 11:26:59.713323
4.895     at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
2025-Jan-13 11:26:59.713323
4.895     at link (node:internal/modules/esm/module_job:75:36)
2025-Jan-13 11:26:59.713323
4.916 npm notice
2025-Jan-13 11:26:59.713323
4.916 npm notice New major version of npm available! 10.9.2 -> 11.0.0
2025-Jan-13 11:26:59.713323
4.916 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0
2025-Jan-13 11:26:59.713323
4.916 npm notice To update run: npm install -g npm@11.0.0
2025-Jan-13 11:26:59.713323
4.916 npm notice
2025-Jan-13 11:26:59.713323
------
2025-Jan-13 11:26:59.713323
2025-Jan-13 11:26:59.713323
 1 warning found (use docker --debug to expand):
2025-Jan-13 11:26:59.713323
 - UndefinedVar: Usage of undefined variable '$NIXPACKS_PATH' (line 18)
2025-Jan-13 11:26:59.713323
Dockerfile:24
2025-Jan-13 11:26:59.713323
--------------------
2025-Jan-13 11:26:59.713323
  22 |     # build phase
2025-Jan-13 11:26:59.713323
  23 |     COPY . /app/.
2025-Jan-13 11:26:59.713323
  24 | >>> RUN --mount=type=cache,id=wwwkcck0g84gg0cwosk4gc80-node_modules/cache,target=/app/node_modules/.cache npm run build
2025-Jan-13 11:26:59.713323
  25 |     
2025-Jan-13 11:26:59.713323
  26 |     
2025-Jan-13 11:26:59.713323
--------------------
2025-Jan-13 11:26:59.713323
ERROR: failed to solve: process "/bin/bash -ol pipefail -c npm run build" did not complete successfully: exit code: 1
2025-Jan-13 11:26:59.721221
Deployment failed. Removing the new version of your application.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mandrasch profile image
Matthias Andrasch • Edited

Hi,

I found this issue (github.com/coollabsio/coolify/issu...) which seems to be related to fresh coolify servers.

My approach would be to try it with the official SvelteKit demo (with adapter-node) first before using your own project to make sure there is not something in your project causing this:

github.com/mandrasch/sveltekit-dem...

If that does not work either, I would try Coolify Discord ... and just saw you posted there already 👍 Good luck, hope you figure it out soon!

Collapse
 
digitaldrreamer profile image
Abdullah Bashir

Thanks @mandrasch
I was eventually able to get it to work. Seems like I installed some dependencies needed during runtime as devDependencies🥲

Thread Thread
 
mandrasch profile image
Matthias Andrasch

Thanks for feedback! I change my guide to just use npm ci, because other devs (including myself) ran into this problem as well for certain projects. Have fun with SvelteKit!

Collapse
 
sammy_schnor profile image
Sammy Schnor

Thanks! Just the guide i needed. Well done :)

Collapse
 
mandrasch profile image
Matthias Andrasch

Good to hear, thanks for feedback! 👍

Collapse
 
invllc profile image
Adrian Rosario

Thank you so much for posting this guide. I got my app deployed no problems so far.

Collapse
 
tom_no0k_134ca5901223fac7 profile image
Tom No0k

I followed the tutorial on my own Coolify instance (Hetzner CX21) and the Sverdle game opens, but I can only type the first word, the game then doesn't work (no error in console). Do you have any idea what could be the cause ?

Collapse
 
mandrasch profile image
Matthias Andrasch • Edited

Hey!

I had this once while I made my first steps with coolify ... but I can't really remember what it was though. Maybe missing https or the missing ORIGIN env var? 🤔

  • I guess you switched to adapter-node?
  • And used https instead of http?
  • And ORIGIN is set to env variables, app was re-deployed afterwards?
  • Start command is node build and after saving you redeployed it?

Just checked my demo repo github.com/mandrasch/sveltekit-dem... - I just switched to adapter-node.

You can also check the logs in coolify, this can also be also helpful sometimes:

Image description

Or you might check the deploy logs.

Did you use my repo github.com/mandrasch/sveltekit-dem... or your own?