Cloudflare Setup

Before we can deploy our application, we need to set up our infrastructure provider. We are using Cloudflare because it offers a generous free tier, excellent performance, and a seamless developer experience for full-stack applications.

Prerequisites

Ensure you have the following installed:

• Node.js (v22 or later)
• bun

Setting up Cloudflare

1. Create a Cloudflare Account

   If you don’t have one already, go to dash.cloudflare.com/sign-up and create a free account. You do not need to enter payment details for the free tier services we are using (Workers and D1).

2. Install Wrangler CLI

   wrangler is the command-line tool for building and deploying Cloudflare Workers. It is already included in our project’s package.json as a dev dependency, but you can also install it globally to use it anywhere.

   bun install -g wrangler

3. Login to Wrangler

   Authenticate the CLI with your Cloudflare account. Run the following command in your terminal:

   bunx wrangler login

   This will open a browser window asking you to authorize Wrangler. Click Allow.

   Once authorized, you should see a success message in your terminal: Successfully logged in.

4. Verify Login

   Check who you are logged in as:

   bunx wrangler whoami

   You should see your account details and Account ID.

Understanding Wrangler Configuration

Our project uses a wrangler.json (or wrangler.toml) file to configure how our application is deployed. Let’s look at the key parts of the configuration in the tm project.

wrangler.json

{
  "name": "tm",
  "main": "./src/worker/index.ts",
  "compatibility_date": "2025-06-17",
  "compatibility_flags": ["nodejs_compat"],
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "tm-d1",
      "database_id": "...", // We will fill this in later
      "migrations_dir": "drizzle"
    }
  ],
  "assets": {
    "directory": "./dist/client",
    "not_found_handling": "single-page-application"
  }
}

• name: The name of your worker service.
• main: The entry point for your backend code (Hono server).
• d1_databases: Configures the connection to your D1 database.
• assets: Tells Cloudflare to serve your static frontend files (built React app) from the ./dist/client directory.

Now that we are authenticated, we are ready to set up our database.