Wrangler CLI Setup

Installation

Install Wrangler

# Global installation
npm install -g wrangler

# Verify installation
wrangler --version

# Or use npx (no global install)
npx wrangler --version

Login to Cloudflare

# Browser-based authentication
wrangler login

# Check authentication
wrangler whoami

---

Create New Project

Initialize Worker Project

# Create new project
wrangler init my-worker

# Options during init:
# - TypeScript? Yes
# - Package manager? npm
# - Git? Yes

# Or create from template
npm create cloudflare@latest my-app

Project Structure

my-worker/
├── src/
│   └── index.ts       # Main worker code
├── package.json
├── tsconfig.json
├── wrangler.toml      # Cloudflare configuration
└── .dev.vars          # Local environment variables

---

wrangler.toml Deep Dive

Basic Configuration

# wrangler.toml

# Project name (will be in URL: my-worker.username.workers.dev)
name = "my-worker"

# Entry point
main = "src/index.ts"

# Compatibility date (determines runtime features)
compatibility_date = "2024-01-15"

# Account ID (optional if logged in)
account_id = "your-account-id"

Environment Variables

# Plain text variables
[vars]
API_URL = "https://api.example.com"
ENVIRONMENT = "production"

# Note: Secrets should be set via CLI, not here

Multiple Environments

# Default (production)
name = "my-worker"
main = "src/index.ts"

[vars]
ENVIRONMENT = "production"
API_URL = "https://api.example.com"

# Staging environment
[env.staging]
name = "my-worker-staging"
vars = { ENVIRONMENT = "staging", API_URL = "https://staging-api.example.com" }

# Preview environment
[env.preview]
name = "my-worker-preview"
vars = { ENVIRONMENT = "preview" }

Deploy to Specific Environment

# Deploy to staging
wrangler deploy --env staging

# Deploy to production (default)
wrangler deploy

---

Local Development

Start Dev Server

# Local development (simulated environment)
wrangler dev

# Remote development (uses real Cloudflare resources)
wrangler dev --remote

# Specify port
wrangler dev --port 8787

# With local persistence (for KV, D1)
wrangler dev --persist

Local Environment Variables

# Create .dev.vars file (gitignored)
echo "SECRET_KEY=my-local-secret" > .dev.vars

# .dev.vars
SECRET_KEY=my-local-secret
DATABASE_URL=http://localhost:54321

---

Secrets Management

Set Secrets

# Set a secret (interactive)
wrangler secret put MY_SECRET
# Enter secret value when prompted

# Set for specific environment
wrangler secret put MY_SECRET --env staging

# List secrets (names only)
wrangler secret list

# Delete secret
wrangler secret delete MY_SECRET

Using Secrets in Code

interface Env {
  MY_SECRET: string;  // Available at runtime
  API_KEY: string;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    // Access secret
    const apiKey = env.API_KEY;

    return new Response(`Using API key: ${apiKey.substring(0, 4)}...`);
  },
};

---

Deployment

Deploy to Cloudflare

# Deploy to production
wrangler deploy

# Deploy to staging
wrangler deploy --env staging

# Dry run (show what would be deployed)
wrangler deploy --dry-run

# Output:
# Uploaded my-worker (1.23 sec)
# Published my-worker (0.45 sec)
#   https://my-worker.username.workers.dev

View Deployed Workers

# List all workers
wrangler deployments list

# View deployment details
wrangler deployments status

---

Logs and Debugging

Real-time Logs

# Stream logs from deployed worker
wrangler tail

# Filter logs
wrangler tail --format pretty
wrangler tail --status error
wrangler tail --search "payment"

# Specific environment
wrangler tail --env staging

Debugging Tips

// Use console.log - appears in wrangler tail
export default {
  async fetch(request: Request): Promise<Response> {
    console.log('Request URL:', request.url);
    console.log('Request method:', request.method);

    try {
      // Your code
    } catch (error) {
      console.error('Error:', error);
      throw error;
    }

    return new Response('OK');
  },
};

---

Common Commands Reference

Development

wrangler dev              # Start local dev server
wrangler dev --remote     # Use real Cloudflare services
wrangler dev --persist    # Persist KV/D1 data locally

Deployment

wrangler deploy           # Deploy to production
wrangler deploy --env X   # Deploy to environment X
wrangler rollback         # Rollback to previous version

Secrets & Config

wrangler secret put NAME  # Set secret
wrangler secret list      # List secrets
wrangler secret delete X  # Delete secret

Monitoring

wrangler tail             # Stream logs
wrangler tail --format json
wrangler deployments list # View deployments

Resources

wrangler kv:namespace list         # List KV namespaces
wrangler queues list               # List queues
wrangler r2 bucket list            # List R2 buckets

---

Best Practices

Project Setup

✅ Use TypeScript for type safety
✅ Set compatibility_date to latest
✅ Use .dev.vars for local secrets
✅ Never commit secrets to git
✅ Use environments for staging/production

Development Workflow

# Typical workflow
wrangler dev            # Develop locally
wrangler deploy --env staging  # Test in staging
wrangler deploy         # Deploy to production
wrangler tail           # Monitor

---

Tổng kết

Key Commands

Command	Purpose
wrangler dev	Local development
wrangler deploy	Deploy to Cloudflare
wrangler tail	View live logs
wrangler secret put	Set secrets

Configuration Files

File	Purpose
wrangler.toml	Main configuration
.dev.vars	Local secrets
tsconfig.json	TypeScript config

---

Q&A

1. Đã setup wrangler CLI chưa?
2. Có multiple environments không?
3. Questions về configuration?