Getting Started
Create a new project
bash
npm create export my-app
cd my-app
npm installThis scaffolds a project with everything you need:
my-app/
├── src/
│ └── index.ts # Your exports
├── package.json # Configuration
└── tsconfig.jsonConfiguration
All configuration lives in package.json under the cloudflare field:
json
{
"name": "my-export-app",
"cloudflare": {
"name": "my-export-app",
"exports": "./src",
"assets": "./public",
"d1": ["MY_DB"],
"r2": ["MY_BUCKET"],
"kv": ["MY_KV"]
},
"security": {
"access": {
"origin": ["https://example.com"]
}
}
}| Field | Required | Description |
|---|---|---|
cloudflare.name | Yes | Worker name (used for deployment) |
cloudflare.exports | Yes | Source entry point (./src or ./src/index.ts) |
cloudflare.assets | No | Static assets directory (e.g., ./public) |
cloudflare.d1 | No | D1 database bindings |
cloudflare.r2 | No | R2 bucket bindings |
cloudflare.kv | No | KV namespace bindings |
security | No | Security settings (see Security guide) |
The wrangler.toml is auto-generated when you run npm run dev or npm run deploy -- you don't need to manage it manually.
Write your exports
Open src/index.ts and write whatever you want to expose:
typescript
export async function greet(name: string) {
return `Hello, ${name}!`;
}
export function add(a: number, b: number) {
return a + b;
}
export class Counter {
private count: number;
constructor(initial = 0) { this.count = initial; }
increment() { return ++this.count; }
getCount() { return this.count; }
}Every named export becomes remotely callable. Sync functions automatically become async on the client.
WARNING
export default is ignored. Use named exports only.
Run locally
bash
npm run devThis starts a local Wrangler dev server. You can now import from http://localhost:8787/:
javascript
import { greet } from "http://localhost:8787/";
await greet("World"); // "Hello, World!"Deploy
bash
npm run exportThis generates type definitions, minifies the client, and deploys to Cloudflare Workers. Your exports are now live at your Worker URL.
Next steps
- Path-based imports -- import individual exports
- Static Assets -- serve HTML, CSS, and other files
- Client Storage -- access D1, R2, KV from the browser
- Classes -- remote class instantiation
- Streaming -- AsyncIterator and ReadableStream
- Shared Exports -- cross-client shared state
- Security -- origin restrictions and access control