·
4 min read
In this article, I want to share my experiences of how I self-hosted my Nuxt apps with Coolify on Hetzner servers.
A brief history of my hosting provider journey
Let me tell you a quick history of my hosting provider journey: it all started with Netlify back in 2018 when I looked for an easy way to host this portfolio website. You don’t get disappointed by providers like Netlify or Vercel: your app gets deployed with only a few clicks, and it’s completely free. An amazing user experience, and I used it to host all my other apps like weekly-vue.news and CodeSnap.dev.
Things get tricky when your apps become more traffic as you only get a limited amount of bandwidth, build minutes, serverless function calls, etc., so I had to switch to the Pro team plan, which is at $19/month. I had to pay $25/month for edge function calls as my function calls exceeded the free limit. A quick win was to migrate some of my Nuxt server routes out to AWS Lambda functions. But this way, my code was split between the Nuxt app and the AWS Lambda functions which made the codebase harder to maintain.
To solve those problems, I moved my apps to Render. There, you pay a server for each of your web apps but you don’t have any function call limitations. You get a server with 0.5 CPU and 512MB RAM for $7/month. Soon, I had to switch to the Team plan for $19/month as I exceeded the free bandwidth of 100GB. The next problem was a traffic spike at one of my apps, which killed the server because it exceeded its server memory limit and wasn’t accessible anymore during that time. Upgrading to the next higher server would cost $25/month for 1 CPU and 2GB RAM...
I was shocked and decided to move my apps to Coolify, which I already used to host my analytics database and some monitoring tools like Grafana. I knew that the cheapest server rented from Hetzner at ~$4/month would provide me with 2 CPUs and 4GB RAM. This solution is the most cost-effective one for me, and I can scale my servers as needed. Additionally, I don't have to worry about any limitations like bandwidth, build minutes, or function calls and any serverless horror stories.
So, let's do a short cost comparison of hosting my three Nuxt apps with the following providers:
- Netlify: $44/month (could potentially grow if I exceed more limits)
- Render: $40/month
- Coolify & Hetzner: $23/month
What is Coolify?
Coolify is an all-in one PaaS that helps you to self-host your own applications, databases or services (like Wordpress, Plausible Analytics, Ghost) without managing your servers, also known as an open-source & self-hostable Heroku / Netlify / Vercel alternative.
Some of its key features are:
- You can deploy your resources to any server, including your own servers.
- Compatible with a wide range of programming languages and frameworks.
- Deploy your resources to a single server, multiple servers, or Docker Swarm clusters.
- Git integration with both hosted and self-hosted platforms like GitHub, GitLab, Bitbucket, Gitea, and others.
- Pull Request Deployments
- Free SSL certificates
- and more...
Setup Coolify
I used this amazing video by Syntax to set up Coolify with my Hetzner servers:
By the way, I decided to use Coolify Cloud to get a fully managed Coolify instance, which I use to connect my Hetzner servers. It provides these advantages:
- Highly available
- Less maintenance
- Free email notifications
- Priority support via email or chat
Deploy Your Nuxt App
Let’s assume you have a server that runs Coolify and an additional server that should host your Nuxt app(s).
To get started, you need to connect your Git repository to Coolify. Check the official documentation for more details.
If you create a new application in Coolify you need to select Nixpacks with the port of your Nuxt app (default is 3000):
Next, you need to change the Start Command to node .output/server/index.mjs:
Alternatively, you can change the start script inside package.json to node .output/server/index.mjs. Nixpacks will automatically use it as the start command.
Static Site
If your Nuxt app is built as a static site, you need to check Is it a static site? and set Publish Directory to /.output/public
pnpm
If you are using pnpm 9+ as your package manager, you might get ERR_PNPM_NO_LOCKFILE Cannot install with "frozen-lockfile" because pnpm-lock.yaml is absent as build error.
Check this GitHub issue for more details.
To solve the problem you need to add nixpacks.toml to your repository with the following content:
nixpacks.toml
providers = ["node"]
[phases.install]
cmds = ["npm install -g corepack", "corepack enable", "corepack prepare pnpm@9.1.4 --activate", "pnpm install"]
Additionally, you need to modify your package.json:
jsonpackage.json
{
...
"packageManager": "pnpm@9.1.4",
"engines": {
"node": "20.12.2",
"pnpm": "9.1.4"
},
...
}
Of course, you need to adjust the versions to your needs.
And that’s it! You should be able to deploy your Nuxt app with Coolify on your servers.
Conclusion
So far, I am very happy with my decision to move my apps to Coolify and Hetzner servers. I can scale my servers as needed and don’t have to worry about any limitations. I can host my apps for a fraction of the costs compared to other providers.
Of course, there are some downsides like more maintenance and less automation compared to providers like Netlify or Render. But I think the cost savings are worth it.
I hope this article helps you to decide on how to host your Nuxt apps. If you have any questions or feedback, feel free to reach out to me.
If you liked this article, follow me on X to get notified about my new blog posts and more content.
Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Simpler Two-Way Binding in Vue With defineModel
The new defineModel compiler macro has available since Vue 3.4 and makes two-way binding much simpler and cleaner.
Dockerizing a Nuxt App: A Comprehensive Guide
Learn how to dockerize your Nuxt 3+ application to ensure consistency, isolation, scalability, and portability across different environments. This guide walks you through the steps to create a Docker container for your Nuxt 3+ app, making deployment seamless and efficient.
