This is my first quick try deploying SvelteKit with the open source software Coolify by Andras Bacsai. Coolify is an "open-source & self-hostable Heroku / Netlify / Vercel alternative".
The advantage of Coolify compared to (also 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 / small hobby projects.
Specs:
- VPS: Hetzner Cloud CPX11 (AMD) - €4,35/month - Update: ARM might be a faster choice
- Coolify v4.0.0-beta.269
Disclaimer: 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 (which is implemented via SSR) on your newly created site 🎉
Have fun with selfhosting!
Connect a domain
You can set the domain of your coolify instance in Settings, just point an A-Record to your servers IP.
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.
Troubleshooting: 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.
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. 🎉
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).
Docs and 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 (YouTube)
- General tutorial: Deploy Node.js applications on a VPS using Coolify
- 5 Easy Steps to Secure your Cloud Server 🔒
Top comments (2)
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 ?
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? 🤔
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:
Or you might check the deploy logs.
Did you use my repo github.com/mandrasch/sveltekit-dem... or your own?