📚 Deploy SvelteKit with SSR on Coolify (Hetzner VPS)

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

Specs:

• VPS: Hetzner Cloud CPX11
• Coolify v4.0.0-beta.269

Disclaimer I: On first try, I ran into "502 Bad Gateway" and 200% CPU load after hitting "Deploy". Had to restart the Hetzner VPS via console.hetzner.cloud. Maybe I didn't save the configuration properly beforehand. 🤔

Disclaimer II: If you want to use this setup in production, please take measures to secure your VPS.

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

That's really it. After install, you can create your admin user via http://your-vps-server-ip:8000/. See 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()
    }
};

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:

Select production:

Add a new resource:

Select "public repository":

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

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

Click "check" and continue with these default settings:

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

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

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'(!):

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 (!):

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

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

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

Have fun with selfhosting!

Official docs:

• https://coolify.io/docs/resources/applications/svelte-kit
• https://kit.svelte.dev/docs/adapter-node