wrangler-proxy

Wrangler Proxy exposes Workers API to outside and integrate to your favorite frameworks. Compatible with DrizzleORM.

Quick links

• Get Started

  • Install
  • Setup wrangler.toml
  • Setup proxy for dev
    • Remote mode
    • Local mode
  • Setup SvelteKit project

• Using wrangler-proxy to expose workers API

• Features

  • D1
    • PreparedStatement
  • Service Bindings
    • app.d.ts
    • hooks.server.ts
    • Example Usage
  • KV
  • R2
  • waitUntil
  • Queues
  • Hyperdrive
  • Workers AI
  • AI Gateway
  • Stream
  • Images

• Contributing

  • Buy Me A Coffee
  • Donating via PayPal

Get Started

Install

npm i -D wrangler-proxy

Example wrangler.toml

name = "worker"
compatibility_date = "2023-07-02"

[[d1_databases]]
binding = "D1"
database_name = "D1"
database_id = "<d1-id>"

[[kv_namespaces]]
binding = "KV"
id = "<kv-id>"
preview_id = "<same-kv-id-as-above>"

[[services]]
binding = "WORKER"
service = "<worker-name>"
environment = "production"

Start proxy for dev

Remote mode

wrangler dev node_modules/wrangler-proxy/dist/worker.js --remote

Local mode

wrangler dev node_modules/wrangler-proxy/dist/worker.js

Example SvelteKit project

// file: app.d.ts

declare global {
  namespace App {
    interface Locals {
      D1: D1Database;
    }
    interface Platform {
      env?: {
        D1: D1Database;
      };
    }
  }
}

export {};

// file: src/hooks.server.ts

import { connectD1 } from 'wrangler-proxy';

export const handle = ({ event, resolve }) => {
  event.locals.D1 = event.platform?.env?.D1 ?? connectD1('D1');
  // or connectD1('D1', { hostname: 'custom-host-name' });
  // default hostname is `http://127.0.0.1:8787`
  return resolve(event);
};

Using wrangler-proxy to expose workers API

Init worker

npm create cloudflare@2 - .

// file: src/index.ts
import { createWorker } from 'wrangler-proxy';

export default createWorker();

Features

• 😔 Need funding
• 🤷 Not fully tested
• ✅ Complete

D1

import { connectD1 } from 'wrangler-proxy';

| Function | Status | | ----------- | ------ | | prepare() | ✅ | | batch() | ✅ | | dump() | 😔 | | exec() | ✅ |

PreparedStatement

| Function | Status | | --------- | ------ | | first() | ✅ | | run() | ✅ | | all() | ✅ | | raw() | ✅ | | bind() | ✅ |

Service Bindings

import { connectServiceBinding } from 'wrangler-proxy';

| Function | Status | | ----------- | ------ | | fetch() | ✅ | | connect() | 😔 |

app.d.ts

// app.d.ts

declare global {
  namespace App {
    interface Locals {
      SB: Fetcher;
    }
    interface Platform {
      env?: {
        SB: Fetcher;
      };
    }
  }
}

hooks.server.ts

/// hooks.server.ts

import { connectServiceBinding } from 'wrangler-proxy';

export const handle = async ({ resolve, event }) => {
  event.locals.SB = event.platform?.env?.SB ?? connectServiceBinding('SB');
  return resolve(event);
};

Example usage

event.locals.SB.fetch('http://whatever.fake/send');

http://whatever.fake is required as a dummy hostname. Without a dummy hostname the fetch will fail.

KV

import { connectKV } from 'wrangler-proxy';

| Function | Status | | ------------------- | ------ | | put() | 🤷 | | get() | ✅ | | getWithMetadata() | 🤷 | | delete() | ✅ | | list() | 🤷 |

R2

import { connectR2 } from 'wrangler-proxy';

| Function | Status | | ------------------------- | ------ | | head() | 😔 | | get() | ✅ | | put() | ✅ | | createMultipartUpload() | 😔 | | resumeMultipartUpload() | 😔 | | delete() | ✅ | | list() | 😔 |

waitUntil

// file: app.d.ts
namespace App {
  interface Platform {
    context: {
      waitUntil(promise: Promise<any>): void;
    };
  }
}

// file: +page.server.ts
import { waitUntil } from 'wrangler-proxy';

export const actions = {
  default: ({ locals, platform }) => {
    waitUntil((async () => {})(), platform?.context);
    return { message: 'success' };
  },
};

Queues 😔

Hyperdrive 😔

Workers AI 😔

AI Gateway 😔

Stream 😔

Images 😔

Contributing

If you find this project helpful, consider supporting it by

or

Donating via PayPal

Your donation will help us implement your requested features faster.