Deploy SvelteKit with SSR on Coolify (Hetzner VPS)
Tags: sveltekit, coolify, hosting, vps
Published: 2024-04-27 12:25:08

This is my first quick try deploying SvelteKit with the open source software [Coolify](https://coolify.io/).

Coolify is an "open-source & self-hostable Heroku / Netlify / Vercel alternative". It is developed by [Andras Bacsai](https://twitter.com/heyandras). 

The advantage of Coolify compared to other awesome server management tools like ploi.io ([SvelteKit ploi.io tutorial](https://dev.to/mandrasch/host-sveltekit-apps-with-ssr-support-via-ploiio-on-hetzner-cloud-1cpa)), 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:

- VPS: [Hetzner Cloud CPX11 (AMD)](https://www.hetzner.com/cloud) - €4,35/month
- Coolify v4.0.0-beta.297

Update: ARM might be [a faster choice](https://github.com/coollabsio/coolify/issues/2088#issuecomment-2082265491). 

**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:

```bash
curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash
```

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`:

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

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

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fqg3gwnn596roufba04.png)

Select production:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzizlo16mlcqzp4kghiw.png)

Add a new resource:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrfitz9bfn702dsjquz0.png)

Select "public repository":

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lirwkhqnmso1wn6x9h9.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nbczjlxc6kxiwpy7ra4.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08swz5z2pfvmnrrdtyay.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj3xisnh4ktrg79qufyc.png)

Click "check" and continue with these default settings: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo6b63e5sux7ticpxifj.png)

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

- Install: `npm ci --omit dev`
- Build: `npm run build`
- Start: `node build`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/refyqxqimdiyc2kthhml.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d72hxpewvl4iemufk3bg.png)

_See SvelteKit docs for more information about these commands: 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89punjobcymgwvd3j4go.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htu8cqa123v28to5yzmq.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tch0ek13trrtxdt3w95z.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joq5y1o4joc2421k2oei.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qem460krw4uy1v5xdqiv.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecf1phy40vu579p92y32.png)

## 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](https://github.com/coollabsio/coolify/issues/2088).

I decided to try the swap option - Swap is **disabled** by default on Hetzner VPS (see: [reddit discussion](https://www.reddit.com/r/hetzner/comments/125hqf4/why_comes_the_default_linux_image_without_swap/))

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2bp9lavru8tgkqf9xze.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gkijeoibln70zyvi8yx.png)

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](https://coolify.io/docs/installation#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 🔒](https://dev.to/code42cate/5-easy-steps-to-secure-your-cloud-server-i17).

## Docs and more resources**

- https://coolify.io/docs/resources/applications/svelte-kit
- https://kit.svelte.dev/docs/adapter-node
- https://nixpacks.com/docs/providers/node
- Coolify crash course [Self Host 101 - Set up Coolify | Self Hosted PaaS with Zero Config Deployments](https://www.youtube.com/watch?v=taJlPG82Ucw) (YouTube)
- General tutorial: [Deploy Node.js applications on a VPS using Coolify](https://sreyaj.dev/deploy-nodejs-applications-on-a-vps-using-coolify)