Cloudflare Deploy

Configuration

Getting Started

Navigate to workers.cloudflare.com/playground

• No account required for testing

• No CLI or local setup needed

• Code executes in real Cloudflare Workers runtime

• Share code via URL (never expires)

Playground Constraints

⚠️ Important Limitations

Playground is for rapid prototyping only. For production apps, use wrangler CLI.

Code Editor

Syntax Requirements

Must export default object with fetch handler:

export default {
  async fetch(request, env, ctx) {
    return new Response('Hello World');
  }
};

Key Points:

• Must use ES modules (export default)

• fetch method receives (request, env, ctx)

• Must return Response object

• TypeScript not supported (use plain JavaScript)

Multi-Module Code

Import from external URLs or inline modules:

// Import from CDN
import { Hono } from 'https://esm.sh/hono@3';

// Or paste library code and import relatively
// (See patterns.md for multi-module examples)

export default {
  async fetch(request) {
    const app = new Hono();
    app.get('/', (c) => c.text('Hello'));
    return app.fetch(request);
  }
};

Preview Panel

Browser Tab

Default interactive preview with address bar:

• Enter custom URL paths

• Automatic reload on code changes

• DevTools available (right-click → Inspect)

HTTP Test Panel

Switch to HTTP tab for raw HTTP testing:

• Change HTTP method (GET, POST, PUT, DELETE, PATCH, etc.)

• Add/edit request headers

• Modify request body (JSON, form data, text)

• View response headers and body

• Test different content types

Example HTTP test:

Method: POST
URL: /api/users
Headers:
  Content-Type: application/json
  Authorization: Bearer token123
Body:
{
  "name": "Alice",
  "email": "[email protected]"
}

Sharing Code

Copy Link button generates shareable URL:

• Code embedded in URL fragment

• Links never expire

• No account required

• Can be bookmarked for later

Example: https://workers.cloudflare.com/playground#abc123...

Deploying from Playground

Click Deploy button to move code to production:

1. Log in to Cloudflare account (creates free account if needed)

2. Review Worker name and code

3. Deploy to global network (takes ~30 seconds)

4. Get URL: Deployed to <name>.workers.dev subdomain

5. Manage from dashboard: add bindings, custom domains, analytics

After deploy:

• Code runs on Cloudflare's global network (300+ cities)

• Can add KV, D1, R2, Durable Objects bindings

• Configure custom domains and routes

• View analytics and logs

• Set environment variables and secrets

Note: Deployed Workers are production-ready but start on Free plan (100k requests/day).

Browser Compatibility

Safari users: Use Chrome, Firefox, or Edge for Workers Playground.

DevTools Integration

1. Open preview in browser tab

2. Right-click → Inspect Element

3. Console tab shows Worker logs:

   • console.log() output

   • Uncaught errors

   • Network requests (subrequests)

Note: DevTools show client-side console, not Worker execution logs. For production logging, use Logpush or Tail Workers.

Limits in Playground

Same as production Free plan:

Exceeding CPU time throws error immediately. Optimize hot paths or upgrade to Paid plan (50ms CPU).