{post.title}
{post.excerpt &&{post.excerpt}
} {date && }You're in!
You're #${position} in line.
`, }), }) }, }, }) ``` ```ts import { db, services } from '@cloudwerk/bindings' export async function POST(request: Request) { const { email } = await request.json() const result = await db.prepare(` INSERT INTO waitlist (email) VALUES (?) RETURNING id `).bind(email).first() await services.email.sendWelcome({ to: email, position: result.id }) return Response.json({ success: true, position: result.id }) } ``` Chapter 3 ### Don't Block the Response Emails are slowing down signups. Let's queue them. Sending emails inline adds latency. Move them to a queue and respond instantly. Cloudwerk queues are just files—define a handler and start sending. \+ Queues Cloudwerk Project Explorer `app/` `├── page.tsx` `├── api/` `│ └── waitlist/` `│ └── route.ts` `├── services/` `│ └── email/` `│ └── service.ts` `└── queues/` `└── emails.ts` 📘 emails.ts app/queues/emails.ts 📘 route.ts app/api/waitlist/route.ts ```ts import { defineQueue } from '@cloudwerk/queue' import { services } from '@cloudwerk/bindings' interface WelcomeEmail { to: string position: number } export default defineQueueWelcome!
', }) // Call payment service const checkout = await services.payments.createCheckout({ customerId: 'cus_123', items: [{ priceId: 'price_123', quantity: 1 }], successUrl: '/success', cancelUrl: '/cancel', }) ``` ### Service Utilities [Section titled “Service Utilities”](#service-utilities) ```typescript import { services, getService, hasService, getServiceNames } from '@cloudwerk/core/bindings' // Type-safe service retrieval interface EmailService { send(params: { to: string; subject: string; body: string }): Promise<{ success: boolean }> } const email = getServiceHello, World!
'); return context.html(htmlContent, { status: 200 }); ``` ### `text()` [Section titled “text()”](#text) Create text response: ```typescript return context.text('Hello, World!'); return context.text('Not found', { status: 404 }); ``` ### `stream()` [Section titled “stream()”](#stream) Create streaming response: ```typescript const stream = new ReadableStream({ start(controller) { controller.enqueue('Hello, '); controller.enqueue('World!'); controller.close(); }, }); return context.stream(stream, { headers: { 'Content-Type': 'text/plain' }, }); ``` ## Type Definitions [Section titled “Type Definitions”](#type-definitions) ```typescript interface CloudwerkContext { env: Env; db: DatabaseClient; kv: KVHelper; r2: R2Helper; queues: RecordWelcome!
', }) return json({ success: true, messageId: result.messageId }) } ``` ### getService() [Section titled “getService()”](#getservice) Get a typed service by name. ```typescript import { getService } from '@cloudwerk/core/bindings' interface EmailService { send(params: { to: string; subject: string; body: string }): Promise<{ success: boolean }> } const email = getService$1')
}
function escapeHtml(text: string): string {
return text
.replace(/&/g, '&')
.replace(//g, '>')
}
export function renderMarkdown(source: string): string {
const nodes = parseMarkdown(source)
const parts: string[] = []
for (const node of nodes) {
switch (node.type) {
case 'heading': {
const Tag = `h${node.level}`
const classes: Record${formatInlineText(node.content!)}
` ) break case 'code': parts.push( `${escapeHtml(node.content!)}- ')
for (const item of node.items!) {
parts.push(`
- ${formatInlineText(item)} `) } parts.push('
My Blog
A personal blog built with Cloudwerk and Cloudflare Workers.
Latest Posts
{posts.length > 0 ? (
{posts.map((post) => (
) : (
No posts yet.
)}{post.title}
{date && }{raw(html)}
About
Welcome to my blog! This is a demo application built with{' '} Cloudwerk, a full-stack framework for Cloudflare Workers.
Features
- File-based routing with dynamic segments
- Server-side rendering with Hono JSX
- D1 database integration
- Static site generation for blog posts
- Tailwind CSS styling
Technology Stack
- Cloudwerk framework
- Cloudflare Workers
- Cloudflare D1 (SQLite)
- Hono JSX
- Tailwind CSS v4
No images yet. Upload one above!
)
}
return (
<>
{images.map((image) => (
))}
Hosted Images
Upload images to Cloudflare Images with pre-defined variants.
{props.error && ({props.error}