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

1. Push your React/Vite/Next.js app to a GitHub repo.
2. Go to Cloudflare Pages and link your repo.
3. 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.

Now check out - Phoenix LiveView: The Pro’s Guide to Scalable Interfaces and UI Patterns. Whether you’re building collaborative apps, integrating APIs, or orchestrating systems across multiple languages, this guide will help you use Phoenix as the real-time command center your architecture deserves.