Deploying a Full-Stack App with Cloudflare Workers, Pages, and D1

Finding the right place to host a modern web app can be tricky. You want something fast, affordable, and easy to manage, without juggling five different services for your frontend, backend, database, and cache.

That's exactly what I found when I looked into deploying my blog using Cloudflare Workers paired with a D1 SQLite database. The setup process took a bit of learning, but the result was a fast, globally distributed app that "just works." In this article, I'll walk you through what Cloudflare Workers and Pages are, how the Wrangler CLI ties everything together, and the exact steps to get your project live.

Prerequisites

Before you start, make sure you have:

• A Cloudflare account (the free tier is enough to get started).
• Node.js and npm installed on your machine.
• A frontend project built with a framework that supports Cloudflare deployment, such as SvelteKit or Nuxt. Both of these frameworks have official adapters that optimize your app to run on Cloudflare's infrastructure.

What Are Cloudflare Workers and Pages?

Cloudflare Workers let you run your backend code (like API routes or server-side rendering) on Cloudflare's global network, instead of a single server in one location. This means your code runs physically closer to your users, which makes your app feel faster.

Cloudflare Pages is Cloudflare's platform for hosting static assets (HTML, CSS, JavaScript, images). When combined with Workers, you get a complete setup: static files served instantly from the edge, and dynamic logic handled by Workers.

If you're using a popular framework like SvelteKit or Nuxt, you don't have to build this integration yourself. These frameworks include built-in support (via adapters or presets) that automatically package your app to run smoothly on Workers and Pages.

Wrangler: Your Command-Line Companion

Wrangler is the official CLI tool for the Cloudflare Developer Platform. Think of it as your remote control for everything Cloudflare: deploying code, managing databases, setting secrets, and more, all from your terminal.

The Configuration File

Wrangler reads its settings from a file named wrangler.jsonc, located in your project's root folder. Here's what a typical configuration looks like:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "<worker-name>",
  "compatibility_date": "2025-07-15",
  "compatibility_flags": ["nodejs_compat"],
  "main": "./.output/server/index.mjs",
  "assets": { "directory": "./.output/public" },
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "<name>",
      "database_id": "<id>",
      "migrations_dir": "server/database/migrations"
    }
  ],
  "kv_namespaces": [
    {
      "binding": "KV",
      "id": "<id>",
      "remote": true
    }
  ]
}

Let's break down the key fields:

• name: The identifier for your Worker on Cloudflare.
• main: The entry point to your compiled server code.
• assets: The folder containing your static frontend files.
• d1_databases: Connects your Worker to a D1 database (Cloudflare's serverless SQLite offering).
• kv_namespaces: Connects your Worker to a KV namespace, a simple key-value store often used for caching.

Step-by-Step Deployment Guide

Here is the complete workflow, from logging in to going live.

flowchart TD
    A[Login to Cloudflare] --> B[Create D1 Database]
    B --> C[Create KV Namespace]
    C --> D[Set Secrets]
    D --> E[Deploy with Wrangler]
    E --> F[App Live on Cloudflare Edge]

1. Log In to Cloudflare

First, authenticate your terminal with your Cloudflare account. This opens a browser window for you to approve access.

npx wrangler login

2. Create a D1 Database

D1 is Cloudflare's serverless SQL database, built on SQLite. Create one with a simple command:

npx wrangler d1 create <database-name>

This command returns a database ID. Copy this value into the database_id field in your wrangler.jsonc file.

3. Create a KV Namespace

If your app needs caching (for example, storing session data or frequently accessed content), create a Key-Value namespace:

npx wrangler kv namespace create <kv-name>

Just like with D1, you'll get an ID to add to your configuration file.

4. Set Your Secrets

Never hard-code sensitive values like API keys or database passwords into your code. Instead, use Wrangler's secret management:

npx wrangler secret put <NAME>

Don't worry about your secrets showing up in your shell history. Wrangler provides a masked input prompt, so the value never gets typed or logged in plain text.

5. Deploy

Once everything is configured, deploying is a single command:

npx wrangler deploy

Wrangler will bundle your app, upload it to Cloudflare's network, and make it live within seconds.

Practical Tip: Local Development

Before deploying, you can test your Worker locally using:

npx wrangler dev

This spins up a local environment that closely mimics production, including access to your D1 database and KV namespace, so you can catch issues early.

Final Thoughts

My overall experience with Cloudflare Workers and Pages was very positive. Yes, setting up the configuration takes a bit of time, and adjusting your framework to fit Cloudflare's model requires some learning. But once everything clicks into place, you get a fast, reliable, and cost-effective way to host a full-stack application.

Next step: If you're using SvelteKit or Nuxt, check out their official Cloudflare deployment guides to see the specific adapter setup for your framework. Then try deploying a small test project using the steps above; it's the best way to get comfortable with the workflow before moving your main app over.