How to Host a Scalable Full-Stack App for Free Using Cloudflare Pages, Workers, and Supabase

Deploying a full-stack app usually comes with hosting costs, backend limitations, and pricing tiers that scale poorly. But with the right modern stack, you can host a surprisingly powerful and scalable full-stack application — completely free. In this guide, you'll learn how to deploy a full-stack app using Cloudflare Pages (frontend), Cloudflare Workers (serverless backend), and Supabase (backend-as-a-service) — all without paying a cent. Why This Stack? Cloudflare Pages: Fast global CDN for your frontend. Cloudflare Workers: Serverless functions with generous free limits. Supabase: Free hosted PostgreSQL, Auth, and Storage APIs. 1. Set Up the Frontend With Cloudflare Pages Push your React/Vite/Next.js app to a GitHub repo. Go to Cloudflare Pages and link your repo. Use defaults for most settings. Set the build command (e.g. npm run build) and output folder (dist or out). Cloudflare Pages handles deployment and CDN edge caching for your frontend out of the box. 2. Add Dynamic Back-End With Cloudflare Workers To create dynamic server-side logic (like handling form data, API calls, etc.): npm install -g wrangler wrangler init my-worker cd my-worker Inside src/index.ts: export default { async fetch(request: Request): Promise { return new Response("Hello from Cloudflare Worker!"); } } Deploy it: wrangler deploy Now your worker lives at a custom subdomain like https://your-project.workers.dev. 3. Connect to Supabase Create an account at Supabase and create a new project. You’ll get: A full PostgreSQL database with SQL editor Built-in auth with social logins RESTful and real-time APIs In your frontend or Workers code, install the Supabase client: npm install @supabase/supabase-js Then use it like this: import { createClient } from '@supabase/supabase-js' const supabase = createClient('https://your-project.supabase.co', 'public-anon-key') const { data, error } = await supabase.from('todos').select('*') You can call this from either frontend or Workers depending on your security needs. Pros and Cons ✅ Pros Completely free for indie-level usage Edge-deployed, low-latency APIs No vendor lock-in — all parts are modular ⚠️ Cons Cloudflare Workers have some limitations (128MB memory, 10ms CPU) Cold start latency may affect performance for low-traffic projects Supabase Auth and Storage limits may require upgrades at scale

Apr 22, 2025 - 02:47

How to Host a Scalable Full-Stack App for Free Using Cloudflare Pages, Workers, and Supabase

Deploying a full-stack app usually comes with hosting costs, backend limitations, and pricing tiers that scale poorly. But with the right modern stack, you can host a surprisingly powerful and scalable full-stack application — completely free.

In this guide, you'll learn how to deploy a full-stack app using Cloudflare Pages (frontend), Cloudflare Workers (serverless backend), and Supabase (backend-as-a-service) — all without paying a cent.

Why This Stack?

Cloudflare Pages: Fast global CDN for your frontend.
Cloudflare Workers: Serverless functions with generous free limits.
Supabase: Free hosted PostgreSQL, Auth, and Storage APIs.

1. Set Up the Frontend With Cloudflare Pages

Push your React/Vite/Next.js app to a GitHub repo.
Go to Cloudflare Pages and link your repo.
Use defaults for most settings. Set the build command (e.g. npm run build) and output folder (dist or out).

Cloudflare Pages handles deployment and CDN edge caching for your frontend out of the box.

2. Add Dynamic Back-End With Cloudflare Workers

To create dynamic server-side logic (like handling form data, API calls, etc.):

npm install -g wrangler
wrangler init my-worker
cd my-worker

Inside src/index.ts:

export default {
  async fetch(request: Request): Promise {
    return new Response("Hello from Cloudflare Worker!");
  }
}

Deploy it:

wrangler deploy

Now your worker lives at a custom subdomain like https://your-project.workers.dev.

3. Connect to Supabase

Create an account at Supabase and create a new project. You’ll get:

A full PostgreSQL database with SQL editor
Built-in auth with social logins
RESTful and real-time APIs

In your frontend or Workers code, install the Supabase client:

npm install @supabase/supabase-js

Then use it like this:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient('https://your-project.supabase.co', 'public-anon-key')

const { data, error } = await supabase.from('todos').select('*')

You can call this from either frontend or Workers depending on your security needs.