VS Code Extensions for Cloudflare D1

Guide to managing Cloudflare D1 databases directly from Visual Studio Code.

Two Options Available

1. Cloudflare D1 Extension (Simpler, Recommended)
2. DBCode (More features, professional)

---

Option 1: Cloudflare D1 Extension (Recommended)

Best for: Simple database browsing and queries

Installation

Method 1 - Quick Install: 1. Press Ctrl+P (Windows/Linux) or Cmd+P (Mac) 2. Paste: ext install yawarjamal.cf-d1 3. Press Enter

Method 2 - Extensions Marketplace: 1. Open VS Code 2. Click Extensions icon (or press Ctrl+Shift+X) 3. Search for "Cloudflare D1" 4. Click Install on "Cloudflare D1" by yawarjamal

Setup Steps

1. Get Your Cloudflare Credentials

You need: - Cloudflare Account Email - Cloudflare API Key (NOT API Token)

Get API Key: 1. Go to: https://dash.cloudflare.com/profile/api-tokens 2. Scroll to "API Keys" section (not "API Tokens") 3. Click "View" next to "Global API Key" 4. Enter your password 5. Copy the API Key

2. Connect to Cloudflare

1. Open VS Code
2. Click the D1 logo in the left activity bar (sidebar)
3. Click "Add Account"
4. Enter:
   • Email: Your Cloudflare account email
   • API Key: The Global API Key from step 1
5. Click Save

3. Select Your Database

1. In the D1 sidebar, your account appears
2. Expand your account
3. You'll see all your D1 databases
4. Click on test-db to connect

4. Browse and Query

View Tables: - Expand your database in the sidebar - See all tables: users, rooms, user_rooms, room_types - Click a table to see its structure

Run Queries: 1. Create a new file with .sql extension (e.g., query.sql) 2. Write your SQL:

SELECT * FROM users;

3. Click "Run Query" button (or use Command Palette) 4. Results appear in a table view

Available Commands

Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open Command Palette:

• D1: Add Account - Add new Cloudflare account
• D1: Remove Account - Remove account credentials
• D1: Switch Database - Change active database
• D1: Execute Query - Run current SQL file

Example Queries

Create a file called queries.sql:

-- List all users
SELECT * FROM users;

-- Count users
SELECT COUNT(*) as total_users FROM users;

-- Get rooms with users
SELECT r.name, COUNT(ur.user_id) as user_count
FROM rooms r
LEFT JOIN user_rooms ur ON r.id = ur.room_id
GROUP BY r.id, r.name;

-- Insert a test user
INSERT INTO users (external_id, created_at, updated_at)
VALUES ('test-user-1', datetime('now'), datetime('now'));

-- View room types
SELECT * FROM room_types;

Select the query you want to run and click "Run Query".

Features

✅ Multi-account support ✅ Database switching ✅ Table browsing ✅ Query execution with results ✅ Schema exploration ✅ Integrated SQL editor

Limitations

❌ No visual query builder ❌ No CSV/JSON export (yet) ❌ No autocomplete (yet)

---

Option 2: DBCode (Professional Tool)

Best for: Advanced database management, visual tools

Installation

1. Open VS Code Extensions
2. Search for "DBCode"
3. Install DBCode by DBCode
4. Restart VS Code

Setup Steps

1. Create Cloudflare API Token

Important: DBCode uses API Tokens (not API Keys like the first extension)

1. Go to: https://dash.cloudflare.com/profile/api-tokens
2. Click "Create Token"
3. Click "Create Custom Token"
4. Configure:
   • Token name: "DBCode Access"
   • Permissions:
     • Account → D1 → Edit
     • Account → Account Settings → Read
5. Click "Continue to summary"
6. Click "Create Token"
7. Copy the token (you won't see it again!)

2. Get Your Account ID

Method 1:

wrangler whoami

Method 2: - Go to any Cloudflare dashboard page - Look at the URL: https://dash.cloudflare.com/{ACCOUNT_ID}/... - Copy the ACCOUNT_ID

3. Connect DBCode to Cloudflare

For a Single Database: 1. Open DBCode extension in VS Code (database icon in sidebar) 2. Click "Add Connection" button (+ icon) 3. Select "Cloudflare D1" from the list 4. Enter: - Connection Name: "Production D1" - Account ID: Your Cloudflare Account ID - Database ID: Your Database ID (from Cloudflare dashboard) - API Token: Your API Token from step 1 5. Click "Save"

For Multiple Databases (Cloud Provider): 1. Open DBCode extension 2. Click "Add Connection" 3. Choose "Cloudflare" cloud provider (from right panel) 4. Enter: - Account ID: Your account ID - API Token: Your API token 5. Click "Connect" 6. DBCode will list all databases in your account 7. Click any database to connect

4. Using DBCode

Browse Tables: - Expand your connection in DBCode sidebar - See all tables and their columns - Right-click table for options

Run Queries: 1. Click "New Query" button 2. Write SQL 3. Click "Execute" or press F5 4. View results in table/JSON format

Visual Tools: - Data Viewer: Browse table data with pagination - Table Designer: View/edit table structure - Query Builder: Visual query creation - Export Data: Export to CSV, JSON, SQL

DBCode Features

✅ Visual query builder ✅ Advanced data viewer ✅ Export to CSV/JSON/SQL ✅ Multi-database connections ✅ Schema designer ✅ Code autocomplete ✅ Query history ✅ Dark/light themes

DBCode vs Simple Extension

Feature	Cloudflare D1 Extension	DBCode
Setup Complexity	Simple (email + API key)	Medium (API token required)
Price	Free	Free
Query Execution	✅	✅
Table Browsing	✅	✅
Visual Query Builder	❌	✅
Data Export	❌	✅
Autocomplete	❌	✅
Multi-database	✅	✅

---

Quick Start Guide

For Your Project

Based on your current setup:

Credentials you have: - Account ID: {{CLOUDFLARE_ACCOUNT_ID}} - Database ID: {{CLOUDFLARE_DB_ID}} - Database Name: {{CLOUDFLARE_DB_NAME}}

Choose your extension:

Simple Option (Cloudflare D1):

# Install
ext install yawarjamal.cf-d1

# Then in VS Code:
1. Click D1 icon in sidebar
2. Add account with your Cloudflare email + Global API Key
3. Select test-db database
4. Start querying!

Professional Option (DBCode):

# Install DBCode extension

# Then in VS Code:
1. Click DBCode icon
2. Add Connection → Cloudflare D1
3. Enter:
   - Account ID: {{**CLOUDFLARE_ACCOUNT_ID**}}
   - Database ID: {{**CLOUDFLARE_DB_ID**}}
   - API Token: [Create new token with D1 Edit permissions]
4. Connect and start working!

---

Common Issues & Solutions

Issue: "Authentication Failed"

For Cloudflare D1 Extension: - Verify you're using Global API Key, not API Token - Check email is correct - Try regenerating API Key

For DBCode: - Verify API Token has correct permissions: - Account → D1 → Edit - Account → Account Settings → Read - Check Account ID is correct - Token might be expired - create new one

Issue: "Database Not Found"

Solution: - Verify Database ID is correct:

wrangler d1 list

- Check Account ID matches database owner - Ensure database exists in Cloudflare dashboard

Issue: "No Tables Showing"

Solution:

# Verify tables exist remotely
wrangler d1 execute test-db --remote --command "SELECT name FROM sqlite_master WHERE type='table'"

If empty, run migrations:

wrangler d1 execute test-db --remote --file=./001_migration.sql

Issue: "Query Fails with Permission Error"

Solution: - API Token needs D1 → Edit permission (not just Read) - Recreate token with proper permissions - Update token in VS Code extension

---

Example Workflows

Workflow 1: Inspect Database Schema

1. Open Cloudflare D1 extension
2. Expand test-db → Tables
3. Click users table
4. See columns: id, external_id, created_at, updated_at
5. Repeat for other tables

Workflow 2: Query and Export Data

Using DBCode: 1. Create new query 2. Write:

SELECT u.external_id, r.name as room_name
FROM users u
JOIN user_rooms ur ON u.id = ur.user_id
JOIN rooms r ON ur.room_id = r.id;

3. Execute 4. Right-click results → Export to CSV

Workflow 3: Test Migrations

1. Create test-query.sql:

   -- Check if migration applied
   SELECT COUNT(*) FROM users;
   SELECT COUNT(*) FROM rooms;
   
   -- Verify indexes exist
   SELECT name FROM sqlite_master WHERE type='index';
   

2. Run query
3. Verify results match expected schema

---

Tips & Best Practices

Security

1. Never commit API keys/tokens to git

   # Add to .gitignore
   .vscode/settings.json  # If it contains credentials
   

2. Use scoped tokens (DBCode)

   • Create separate tokens for development and production
   • Limit permissions to minimum required

3. Rotate credentials regularly

   • Change tokens every 90 days
   • Revoke old tokens

Performance

1. Use LIMIT for large queries

   SELECT * FROM users LIMIT 100;
   

2. Check query execution time

   • DBCode shows execution time
   • Optimize slow queries

3. Create indexes for frequent queries

   CREATE INDEX idx_users_external_id ON users(external_id);
   

Tips

1. Save common queries

   • Create a queries/ folder
   • Save frequently used queries as .sql files

2. Use SQL snippets

   • Create VS Code snippets for common patterns
   • Example: INSERT, SELECT with JOINs

---

Additional Resources

• DBCode Documentation
• Cloudflare D1 Extension
• Cloudflare D1 Documentation
• Cloudflare D1 Getting Started
• Wrangler Commands Reference