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:
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:
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
https://nixpacks.com/docs/providers/node
