[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f2qze6ncqcv3tx":3,"$f2hz2z10rw1wz6":9},{"tagline":4,"link_x":5,"link_youtube":6,"link_linkedin":7,"link_github":8,"bio":4,"home_header":4,"home_message":4,"avatar_url":4},"","https:\u002F\u002Fx.com\u002Fivanermolaev_","https:\u002F\u002Fwww.youtube.com\u002F@GetAuth","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fiermolaev\u002F","https:\u002F\u002Fgithub.com\u002FNawy",{"tag":10,"posts":14},{"id":11,"name":12,"slug":12,"colorHex":13},3,"infra","#29a38b",[15],{"id":16,"nanoid":17,"title":18,"content":19,"excerpt":20,"createdAt":21,"updatedAt":21,"tags":22},"019ff6e5-2e8e-76f1-93b3-90ba6da111cc","cBix_kVnzs","How I Deployed My Full-Stack App on Cloudflare's Edge Network","# Deploying a Full-Stack App with Cloudflare Workers, Pages, and D1\n![Image](\u002FK9ABGbCmMJBf.avif)\n\nFinding 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.\n\nThat'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.\n\n## Prerequisites\n\nBefore you start, make sure you have:\n\n- A **Cloudflare account** (the free tier is enough to get started).\n- **Node.js** and **npm** installed on your machine.\n- 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.\n\n## What Are Cloudflare Workers and Pages?\n\n**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.\n\n**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.\n\nIf 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.\n\n## Wrangler: Your Command-Line Companion\n\n**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.\n\n### The Configuration File\n\nWrangler reads its settings from a file named `wrangler.jsonc`, located in your project's root folder. Here's what a typical configuration looks like:\n\n```json\n{\n  \"$schema\": \"node_modules\u002Fwrangler\u002Fconfig-schema.json\",\n  \"name\": \"\u003Cworker-name>\",\n  \"compatibility_date\": \"2025-07-15\",\n  \"compatibility_flags\": [\"nodejs_compat\"],\n  \"main\": \".\u002F.output\u002Fserver\u002Findex.mjs\",\n  \"assets\": { \"directory\": \".\u002F.output\u002Fpublic\" },\n  \"d1_databases\": [\n    {\n      \"binding\": \"DB\",\n      \"database_name\": \"\u003Cname>\",\n      \"database_id\": \"\u003Cid>\",\n      \"migrations_dir\": \"server\u002Fdatabase\u002Fmigrations\"\n    }\n  ],\n  \"kv_namespaces\": [\n    {\n      \"binding\": \"KV\",\n      \"id\": \"\u003Cid>\",\n      \"remote\": true\n    }\n  ]\n}\n```\n\nLet's break down the key fields:\n\n- **`name`**: The identifier for your Worker on Cloudflare.\n- **`main`**: The entry point to your compiled server code.\n- **`assets`**: The folder containing your static frontend files.\n- **`d1_databases`**: Connects your Worker to a **D1** database (Cloudflare's serverless SQLite offering).\n- **`kv_namespaces`**: Connects your Worker to a **KV** namespace, a simple key-value store often used for caching.\n\n## Step-by-Step Deployment Guide\n\nHere is the complete workflow, from logging in to going live.\n\n```mermaid\nflowchart TD\n    A[Login to Cloudflare] --> B[Create D1 Database]\n    B --> C[Create KV Namespace]\n    C --> D[Set Secrets]\n    D --> E[Deploy with Wrangler]\n    E --> F[App Live on Cloudflare Edge]\n```\n\n### 1. Log In to Cloudflare\n\nFirst, authenticate your terminal with your Cloudflare account. This opens a browser window for you to approve access.\n\n```shell\nnpx wrangler login\n```\n\n### 2. Create a D1 Database\n\nD1 is Cloudflare's serverless SQL database, built on SQLite. Create one with a simple command:\n\n```shell\nnpx wrangler d1 create \u003Cdatabase-name>\n```\n\nThis command returns a **database ID**. Copy this value into the `database_id` field in your `wrangler.jsonc` file.\n\n### 3. Create a KV Namespace\n\nIf your app needs caching (for example, storing session data or frequently accessed content), create a **Key-Value namespace**:\n\n```shell\nnpx wrangler kv namespace create \u003Ckv-name>\n```\n\nJust like with D1, you'll get an ID to add to your configuration file.\n\n### 4. Set Your Secrets\n\nNever hard-code sensitive values like API keys or database passwords into your code. Instead, use Wrangler's secret management:\n\n```shell\nnpx wrangler secret put \u003CNAME>\n```\n\nDon'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.\n\n### 5. Deploy\n\nOnce everything is configured, deploying is a single command:\n\n```shell\nnpx wrangler deploy\n```\n\nWrangler will bundle your app, upload it to Cloudflare's network, and make it live within seconds.\n\n## Practical Tip: Local Development\n\nBefore deploying, you can test your Worker locally using:\n\n```shell\nnpx wrangler dev\n```\n\nThis spins up a local environment that closely mimics production, including access to your D1 database and KV namespace, so you can catch issues early.\n\n## Final Thoughts\n\nMy 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.\n\n**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.","Deploy full-stack apps globally with Cloudflare Workers, Pages, and D1. Host your backend, frontend, and database seamlessly on Cloudflare's edge network using Wrangler CLI.","2026-08-12T16:54:02.000Z",[23],{"id":11,"name":12,"slug":12,"colorHex":13}]