🎬 This article is a companion to my YouTube video. Watch it here:

https://www.youtube.com/watch?v=oFmJYMk1iCg

Introduction

In the last video, we talked about the VPS and why it is a compelling option for hosting your web applications. I mentioned a tool called Coolify that makes managing a VPS significantly easier. In this video, we are going to dive deeper into what Coolify actually is, what it does, and why I think it is one of the best tools available for developers and small teams who want the power of a VPS without the complexity of managing one from scratch.

What is Coolify?

Coolify is a free, open-source, self-hostable platform as a service — or PaaS. Think of it as your own personal Heroku or Render, but running on your own server. This means you own your infrastructure, your data, and your costs.

The best way to understand Coolify is to compare it to the alternatives. Platforms like Heroku, Render, and Railway are fully managed PaaS solutions. They abstract away all the server complexity — you push your code and it runs. The trade-off is cost and control. As your app scales, the bills grow quickly and you have limited control over the underlying infrastructure.

Coolify gives you the same developer experience — push your code and it deploys — but on a VPS that you control. You get the simplicity of a managed platform with the economics and control of a VPS.

What Does Coolify Do?

Git Integration

Connect your GitHub, GitLab, or Bitbucket repository and Coolify will automatically deploy your app every time you push to your main branch. No manual deployments, no SSH commands — just push your code and it is live.

Dockerized Deployments

Every application Coolify deploys runs in a Docker container. This means your apps are isolated, portable, and consistent across environments. You do not need to know Docker deeply to use Coolify — it handles the containerization for you.

Automatic HTTPS

Coolify integrates with Let's Encrypt to automatically provision and renew SSL certificates for all your applications. Every app gets HTTPS out of the box with zero configuration on your part.

Built-in Reverse Proxy

Coolify uses Traefik as its built-in reverse proxy and web server. It automatically routes traffic to the right application based on the domain name. You can run multiple applications on the same VPS and Coolify handles the routing between them.

Database Management

Coolify can deploy and manage databases alongside your applications — PostgreSQL, MySQL, MongoDB, Redis and more. You can spin up a database with a few clicks and connect it to your application without any manual configuration.

Environment Variables

Manage your environment variables securely through the Coolify dashboard. No more manually editing .env files on the server.

Monitoring and Logs

Coolify provides basic monitoring and real-time log streaming for all your applications directly from the dashboard. You can see what your app is doing without SSH-ing into the server.

Backups

Coolify supports automated database backups to S3-compatible storage. Your data is protected without any manual backup scripts.

Why Would You Use Coolify?

You want the economics of a VPS without the complexity

A \(6 to \)10 per month VPS with Coolify can run multiple applications that would cost hundreds of dollars per month on Heroku, Render, or Railway. For a startup or indie developer this is a significant saving.

You want full control over your infrastructure

With Coolify you own everything. Your data stays on your server. You choose your hosting provider. You are not locked into any platform's pricing or terms of service.

You want a great developer experience

Coolify's dashboard is clean and intuitive. Deploying an application is genuinely just a few clicks. It does not feel like managing a server — it feels like using a modern PaaS.

You are running multiple projects

One VPS with Coolify can host multiple applications, multiple databases, and multiple domains. Instead of paying for separate hosting for each project, you consolidate everything onto one server.

What Are the Limitations?

• You are responsible for your server — if your VPS goes down, your apps go down.

• Some configuration is still required — especially for custom setups, firewalls, and advanced networking.

• It is self-hosted — meaning you need to keep Coolify itself updated and maintained.

• Not ideal for very large scale — for enterprise applications with massive traffic you may need dedicated infrastructure beyond a single VPS.

How Do You Get Started?

Getting Coolify up and running is surprisingly straightforward. In the next video I will walk you through the complete setup — from provisioning a VPS to having Coolify installed and your first application deployed.

All you need to get started is:

• A VPS with at least 2GB RAM and 2 CPU cores

• A domain name

• About 30 minutes of your time

Conclusion

Coolify bridges the gap between the simplicity of managed platforms and the power and economics of a VPS. For developers and small teams who want to own their infrastructure without being overwhelmed by server management, it is genuinely one of the best tools available right now.

In the next video we will get our hands dirty and set up Coolify from scratch. See you there.

References

• Coolify Website

• Coolify Documentation

• Coolify GitHub

🔔 Subscribe to my YouTube channel for the full series on building a modern web app back end from scratch.

🎬 This article is a companion to my YouTube video. Watch it here:

https://www.youtube.com/watch?v=jxMMyRrWcyk

Introduction

Every great web application with millions of users has an even greater back end — and it has to be. Accessing your app over a prolonged period of time will test the integrity, availability, and speed of your back end. Backend technology can be inexpensive, or it can cost you thousands of dollars. So what's the deal here?

Let me warn you that this channel is highly opinionated. I am sharing the tools that I use and how I use them.

For my back end that powers my web apps, I use Directus for my headless CMS, supported by a PostgreSQL and Redis database, hosted on a VPS, and managed by Coolify. Wow, that is a mouthful — and in this series we will explore how they all work together.

So let's tackle each technology one at a time, starting with the VPS.

What is a VPS?

A Virtual Private Server, known as a VPS, is a virtual environment created on a physical server. Think of it like an apartment building — everyone shares the same physical structure, but each unit has its own private space, utilities, and security.

While multiple VPS instances share a physical server, be careful not to confuse this with shared hosting. Each VPS is allocated its own dedicated resources, which are restricted to that VPS for as long as it is active. Therefore, the performance of a VPS is not directly affected by the usage of other VPS instances, but rather by the underlying performance of the physical server itself.

What are the Benefits of a VPS?

There are several benefits to consider when deciding on virtual private server hosting:

• Greater control — Compared to minimum shared hosting, you have root access and can fully customize your server environment.

• Dedicated resources — Allocated CPU, memory, and storage help ensure consistent performance.

• Scalability — You can easily scale resources up or down to accommodate changing traffic and application demands.

• Cost-effectiveness — A VPS typically offers a balance between the affordability of shared hosting and the power of a dedicated server.

• Improved security — Isolation from other users on the same physical server enhances security.

• Choice of operating system — You can choose the operating system that best suits your needs, such as Linux or Windows.

How Does it Stack Up Against Vercel or Netlify?

Vercel

Vercel offers minimal setup with Git integration and fast deployment right out of the box. It has a free Hobby plan, but it is strictly for personal, non-commercial use. Once your app grows and needs to scale, you will need to move to a paid plan.

The Pro plan starts at $20 per user per month, and also covers serverless functions. Despite the name, serverless code still runs on a physical server — however, the infrastructure management, such as scaling, security patching, and provisioning, is handled entirely by the cloud provider.

The main factor to watch carefully is cost. Vercel uses usage-based billing, and costs can escalate quickly — especially since Turbo build machines became the default for new Pro projects in February 2026, at \(0.126 per build minute. A moderate team workflow can generate over \)400 per month in build costs alone, before bandwidth and compute charges. I have seen some alarming Vercel bills shared online by customers, which means you need to fully understand the pricing model before you commit.

Netlify

Netlify has historically been more suited to static sites and composable web applications. Composable applications are software systems built from independent, interchangeable modules rather than a single rigid codebase. Netlify also has Git integration, customizable build plugins, and serverless functions.

Netlify moved to a credit-based pricing model in September 2025, designed to simplify metered billing. As of April 2026, the Pro plan costs \(20 per month and now includes unlimited team member seats, which is an improvement over the previous per-seat model. However, teams working on active projects with real traffic can burn through their credit allocation quickly, and credit pack add-ons at \)10 per 1,500 credits mean teams can regularly spend \(40 to \)80 or more per month beyond the base subscription. Your overall control is also more limited compared to a VPS, and you will still face a monthly cost as your app grows.

The VPS

VPS prices can grow as your app grows, but in my experience at a slower and more predictable rate — with no surprise charges. However, if you manage a VPS yourself, it requires understanding web servers, firewalls, operating systems, caching, and more. It can get complex very quickly and may cause you to spend more time managing the server than building and scaling your app.

That is why some developers and business owners hire a team to handle it. Small teams may not have the budget for a dedicated infrastructure team, so they often opt for a more convenient managed solution.

Coolify — The Game Changer

There is one tool that I think is worth mentioning and is a genuine game changer — and that is Coolify.

Coolify is a self-hostable platform that makes managing your VPS significantly easier. It offers:

• ✅ Git integration

• ✅ Dockerized container deployments

• ✅ Automatic HTTPS

• ✅ Built-in web server with no manual configuration required

This makes the VPS a very real and competitive option worth considering. If you choose a solid hosting provider and pair it with the right tools, you can make this an absolute dream to work with.

Now don't get me wrong — even with Coolify there are some configurations you will have to make. But I do believe a VPS is a great solution for a startup, mid-size, or enterprise scaled app with the right tools.

Conclusion

Stay with me in this series and we will definitely explore the possibilities. See you in the next video.

References

• Google Cloud — What is a VPS

• AWS — What is a VPS

• IBM — VPS

• Scala Hosting — VPS Explained

• DreamHost — Beginner's Guide to VPS

• Vercel Pricing

• Netlify Pricing

• Bejamas — Self Hosting vs Vercel and Netlify

🔔 Subscribe to my YouTube channel for the full series on building a modern web app back end from scratch.

Here's how I structure a single directus.ts file that covers authentication, typed data fetching, filtering, CRUD operations and file uploads.

Installing the SDK

npm install @directus/sdk

Setting Up the Client

Create the client once and export it. Passing your schema type as a generic is what unlocks end-to-end type safety across every request.

import type { Product, Navigation, CartItem, Order } from '@/types';
import {
  authentication,
  createDirectus,
  rest,
  readItems,
  createItem,
  updateItem,
  deleteItem,
  readMe,
  updateMe,
  deleteUser,
  uploadFiles,
  registerUser as registerUserDirectus,
} from '@directus/sdk';

const directusUrl =
  import.meta.env.VITE_DIRECTUS_URL ??
  process.env.VITE_DIRECTUS_URL ??
  'https://your-directus-url.com';

const directus = createDirectus(directusUrl)
  .with(authentication('session', { credentials: 'include' }))
  .with(rest({ credentials: 'include' }));

Using authentication('session') with credentials: 'include' means cookies are handled automatically — no manual token management needed.

Fetching Data with Full Type Safety

Each collection gets its own exported async function with a typed return value.

export async function getProducts(): Promise<Product[]> {
  const items = await directus.request(readItems('products'));
  return items as Product[];
}

Filtering is First-Class

The SDK's filter syntax maps directly to Directus's query engine — no raw query strings, no URL building.

export async function getProductsByCategory(
  category: string
): Promise<Product[]> {
  const items = await directus.request(
    readItems('products', {
      filter: { category: { _eq: category } },
    })
  );
  return items as Product[];
}

What Else is Covered

The same client and pattern covers the full CRUD surface:

• readItems — fetch collections

• createItem — insert records

• updateItem — update records

• deleteItem — delete records

• uploadFiles — handle file uploads

• readMe / updateMe / deleteUser — user profile management

• registerUser — user registration

All importable directly from @directus/sdk — the SDK provides typed functions and you bring your own collection types for end-to-end type safety.

Using it in a TanStack Start Loader

TanStack Start's file-based routing and loader pattern pairs perfectly with this setup. Data is fetched server-side and ready before the component renders.

export const Route = createFileRoute('/products')({
  loader: () => getProducts()
});

No boilerplate, no custom wrappers, no type assertions. One file, full coverage.

If you're evaluating Directus as a headless CMS for a TanStack Start project this setup gets you up and running quickly with a clean, maintainable data layer from day one.

Directus ticked every box. Here's why I chose it, how I set it up, and what it looks like in practice.

How Directus Compares to Other CMS Options

There are plenty of headless CMS options out there. Here's how Directus stands out:

Strapi is a strong alternative and supports multiple SQL databases too. The key difference for me was that Directus connects directly to any existing database — you point it at a database you already have and it works. There's no schema migration system to manage and no framework-specific setup. Contentful and Sanity are cloud-only, which means you don't own your data and you're subject to their pricing as you scale.

Setting Up Directus with Docker Compose

I run Directus on a VPS managed by Coolify. The entire setup lives in a single Docker Compose file. Here's the full config I use for the demo store:

services:
  directus:
    image: 'directus/directus:11.15.4'
    ports:
      - '8055:8055'
    volumes:
      - './uploads:/directus/uploads'
      - './extensions:/directus/extensions'
    environment:
      SECRET: '${SECRET}'
      MARKETPLACE_TRUST: all

      # Database
      DB_CLIENT: pg
      DB_HOST: '${DB_HOST}'
      DB_PORT: '5432'
      DB_DATABASE: '${DB_DATABASE}'
      DB_USER: '${DB_USER}'
      DB_PASSWORD: '${DB_PASSWORD}'

      # Redis Cache
      CACHE_ENABLED: 'false'
      CACHE_AUTO_PURGE: 'true'
      CACHE_STORE: redis
      REDIS: '${REDIS_URL}'

      # CORS
      CORS_ENABLED: 'true'
      CORS_ORIGIN: '${CORS_ORIGIN}'
      CORS_CREDENTIALS: 'true'

      # Email via Resend SMTP
      EMAIL_TRANSPORT: smtp
      EMAIL_SMTP_HOST: smtp.resend.com
      EMAIL_SMTP_PORT: 465
      EMAIL_SMTP_USER: resend
      EMAIL_SMTP_PASSWORD: '${EMAIL_SMTP_PASSWORD}'
      EMAIL_SMTP_SECURE: 'true'
      EMAIL_FROM: contact@yourdomain.com

      # Auth
      USER_REGISTER_REQUIRE_EMAIL_VERIFICATION: 'true'
      USER_REGISTER_URL_ALLOW_LIST: '${USER_REGISTER_URL_ALLOW_LIST}'
      PASSWORD_RESET_URL_ALLOW_LIST: '${PASSWORD_RESET_URL_ALLOW_LIST}'

      # Google OAuth
      AUTH_PROVIDERS: google
      AUTH_GOOGLE_DRIVER: openid
      AUTH_GOOGLE_ISSUER_URL: 'https://accounts.google.com'
      AUTH_GOOGLE_CLIENT_ID: '${AUTH_GOOGLE_CLIENT_ID}'
      AUTH_GOOGLE_CLIENT_SECRET: '${AUTH_GOOGLE_CLIENT_SECRET}'
      AUTH_GOOGLE_IDENTIFIER_KEY: email
      AUTH_GOOGLE_ALLOW_PUBLIC_REGISTRATION: 'true'
      AUTH_GOOGLE_DEFAULT_ROLE_ID: '${AUTH_GOOGLE_DEFAULT_ROLE_ID}'
      AUTH_GOOGLE_REDIRECT_ALLOW_LIST: '${AUTH_GOOGLE_REDIRECT_ALLOW_LIST}'
      AUTH_GOOGLE_MODE: session

      # Session & Cookies
      SESSION_COOKIE_SECURE: 'true'
      SESSION_COOKIE_SAME_SITE: lax
      REFRESH_TOKEN_COOKIE_SECURE: 'true'
      REFRESH_TOKEN_COOKIE_SAME_SITE: lax

      # Extensions
      EXTENSIONS_AUTO_RELOAD: 'true'
      EXTENSIONS_PATH: /directus/extensions

A few things worth noting:

• PostgreSQL is the database — DB_CLIENT: pg tells Directus to use it

• Resend handles all transactional email via SMTP — verification emails, password resets

• Google OAuth is configured via OpenID Connect — users can register and log in with their Google account

• Session cookies are secure and SameSite lax — works cleanly with TanStack Start on a separate domain

• All sensitive values are environment variables — never hardcoded

Note: In my setup PostgreSQL runs as a separate service managed independently by Coolify — that's why it's not included in this Compose file. If you prefer to keep everything together, you can add PostgreSQL directly to the same file:

  postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: '${DB_DATABASE}'
      POSTGRES_USER: '${DB_USER}'
      POSTGRES_PASSWORD: '${DB_PASSWORD}'
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

Then set DB_HOST to postgres in your Directus environment variables to point it at the service name. Either approach works — separate or combined is a matter of preference.

The Admin Dashboard and Collections

Once Directus is running, you access the admin dashboard at your Directus URL. This is where you build your data model visually.

For the demo store I created the following collections:

• products — name, description (WYSIWYG), price, sale price, category, images, slug

• categories — name, slug, description

• orders — user, items, total, status

• order_items — order, product, quantity, price

• navigation — links and structure for the site nav

Each collection maps directly to a PostgreSQL table. Directus generates the REST and GraphQL API automatically. No boilerplate, no migrations to write by hand.

The WYSIWYG editor on the description field outputs HTML — I cover how to render that safely in React in a later post in this series.

Roles and Permissions

This is where Directus really shines for production apps. Every collection and field can have granular permissions set per role.

For the demo store I set up three roles:

Public — unauthenticated visitors

• Can read products, categories, navigation

• Cannot read orders, order_items, or any user data

Authenticated User — logged in customers

• Can read all public collections

• Can read and create their own orders and order_items

• Can read and update their own user profile

• Cannot read other users' data

Admin — full access

• Full CRUD on all collections

• Access to the Directus admin dashboard

The permissions are configured in the Directus admin panel under Settings → Roles & Permissions. You set them visually — no code required. Each role gets a matrix of read, create, update, delete permissions per collection, and you can even restrict access to specific fields within a collection.

What Directus Handles For the Demo Store

• ✅ All product and category data via REST API

• ✅ User registration with email verification

• ✅ Login with email/password and Google OAuth

• ✅ Password reset via email

• ✅ Order management

• ✅ File and image storage and serving

• ✅ Role-based access control

• ✅ Admin dashboard for managing all content

All from a single self-hosted instance running on a $20/month VPS.

In the next post I'll cover how I connect TanStack Start to Directus using the SDK — setting up the client, typed data fetching, and filtering collections.

➡️ Next: Connecting TanStack Start to Directus with the SDK

The live demo is at demostore.northernrangedigital.com.

This series documents the entire stack I used to build it, the decisions I made along the way, and the patterns I've settled on for building full stack apps. Everything is grounded in real code from a real project.

The Stack

• TanStack Start — full stack React framework with file-based routing, SSR, loaders and type-safe navigation

• Directus — headless CMS and backend, self-hosted on a VPS, handling data, auth, file storage and the admin dashboard

• PostgreSQL — the database underneath Directus

• Tailwind CSS v4 — styling, with the Typography plugin for rich text rendering

• Shadcn UI — component library built on top of Tailwind

• Zustand — client-side state management for auth and cart

• Coolify — self-hosted deployment platform managing the frontend, Directus and PostgreSQL via Docker Compose

• Resend — email delivery for verification and password reset, configured via SMTP in Docker Compose

Why This Stack

I wanted a setup that was flexible, cost-effective, and production-ready without stitching together five different paid services. Everything runs on a single VPS for around $20/month — Directus handles the backend, authentication, file storage and admin UI all in one place, and Coolify handles deployments automatically when I push code.

The result is a full stack that scales from a weekend project to a production app without changing tools or blowing up the infrastructure bill.

What This Series Covers

Each post in this series covers a specific part of the stack with real code from the demo store:

1. Why I chose Directus as my backend — what it offers, how it's licensed, and when it's the right fit

2. Connecting TanStack Start to Directus with the SDK — setting up the client, typed data fetching, filtering

3. Metadata, data loading and loading skeletons in TanStack Start — head, loader and pendingComponent

4. Protecting routes with Zustand — auth store, hydration, layout route guards

5. Directus auth out of the box — registration, login, email verification and password reset

6. Rendering rich text safely — DOMPurify, html-react-parser and Tailwind Typography

If you're evaluating TanStack Start, Directus, or this kind of self-hosted setup for your next project, this series is built for you. Every post includes real code, real decisions, and honest tradeoffs.

Let's build.