Building a SaaS App with Astro and Cloudflare

The traditional SaaS stack — a React frontend, Express API, and PostgreSQL on AWS — works, but it comes with significant operational overhead. There’s a leaner alternative: Astro for the frontend, Cloudflare Workers for the API, and D1 for the database.

Why This Stack?

Astro: Content Meets Application

Astro renders pages to static HTML by default and hydrates interactive components only where needed. Marketing pages, docs, and dashboards all coexist in one codebase.

---
// src/pages/dashboard.astro
import DashboardApp from "../components/DashboardApp";
import BaseLayout from "../layouts/BaseLayout.astro";
---
<BaseLayout title="Dashboard">
  <DashboardApp client:load />
</BaseLayout>

Cloudflare Workers: API at the Edge

Workers run in 300+ data centers worldwide. Cold starts are under 5ms. You get global low-latency API endpoints without provisioning servers.

// functions/api/projects.ts
export const onRequestGET: PagesFunction<Env> = async (context) => {
  const db = context.env.DB;
  const projects = await db
    .prepare("SELECT * FROM projects WHERE user_id = ?")
    .bind(context.data.userId)
    .all();

  return Response.json(projects.results);
};

D1: SQLite at the Edge

D1 is Cloudflare’s distributed SQLite database. It’s relational, supports migrations, and works with ORMs like Drizzle.

Architecture Overview

Here’s how the pieces fit together:

• Astro Pages — Static marketing site, docs, blog
• Astro + Islands — Interactive dashboard components (React/Svelte)
• Cloudflare Pages Functions — API endpoints (/api/*)
• D1 — User data, projects, settings
• R2 — File uploads, assets
• KV — Session tokens, feature flags

Authentication

Magic-link authentication is a great fit for this stack. The flow:

1. User enters email on the login page
2. Worker generates a token, stores it in KV with a TTL
3. Email worker sends the magic link
4. User clicks the link, Worker validates the token, sets a JWT cookie

No passwords to hash, no OAuth complexity for v1.

Deployment

Cloudflare Pages handles deployment automatically on git push. Each branch gets a preview URL. Production deploys are atomic — no downtime, instant rollback.

# Deploy with Wrangler
npx wrangler pages deploy dist --project-name=my-saas

Cost at Scale

For a SaaS with 10,000 monthly active users:

• Workers: Free tier covers ~100K requests/day
• D1: 5GB free, 25 billion row reads/month free
• R2: 10GB free storage, no egress fees
• Pages: Unlimited static requests

You can run a real SaaS for under $5/month until you hit serious scale.

Trade-offs

• D1 is SQLite, not PostgreSQL — no JSONB, limited concurrent writers
• Workers have a 128MB memory limit and no persistent connections
• Vendor lock-in to Cloudflare’s platform

For most SaaS products, these constraints are non-issues. When they do become limiting, Cloudflare’s platform is mature enough to handle it.

Let’s build your SaaS →