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

#cloudflare #supabase #fullstack #serverless

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

🚀 Alternatives

Backend: Self-hosted PostgreSQL, Firebase, or Planetscale
Frontend: Netlify, Vercel (also offer free tiers)
Serverless: AWS Lambda (with careful free tier usage)

Conclusion

Using Cloudflare Pages, Workers, and Supabase, you can build a serious full-stack app with user auth, database, storage, and global CDN — all for free. This setup is perfect for indie hackers, portfolio projects, SaaS MVPs, and anyone trying to ship fast on a budget.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift