Deploying to Cloudflare

Manic offers first-class support for Cloudflare's edge network. You can deploy as either a Cloudflare Worker or a Cloudflare Pages project.

Setup

Configure the Cloudflare provider in manic.config.ts:

import { defineConfig } from 'manicjs/config';
import { cloudflare } from '@manicjs/providers';

export default defineConfig({
  providers: [cloudflare()],
});

Deployment

Cloudflare Pages

Commit and push your code to GitHub/GitLab.
Connect your repository in the Cloudflare Dashboard.
Build Settings:
- Framework Preset: None
- Build Command: manic build
- Output Directory: dist/client (Static) and .manic/ (Server)

Cloudflare Workers

Use wrangler to deploy directly:

manic build
wrangler deploy

Configuration

wrangler.toml

Manic auto-generates wrangler.toml during build. You can customize it:

name = "my-manic-app"
main = ".manic/server/_worker.js"
compatibility_date = "2024-11-21"
compatibility_flags = ["nodejs_compat"]

# Cloudflare KV bindings
[[kv_namespaces]]
binding = "KV"
id = "your-kv-namespace-id"

# Cloudflare D1 bindings
[[d1_databases]]
binding = "DB"
database_name = "my-database"
database_id = "your-db-id"

# Environment variables
[env.production]
vars = { ENVIRONMENT = "production" }

Access bindings in API routes:

export async function GET({ request }: { request: Request; env: any }) {
  const value = await env.KV.get('key');
  const row = await env.DB.prepare('SELECT * FROM users').first();
  
  return Response.json({ value, row });
}

Features

Edge Execution: Your entire application runs on Cloudflare's edge nodes.
Low Latency: Sub-millisecond cold starts via V8 isolation.
KV Storage: Distributed key-value store at the edge.
D1 Database: SQLite databases replicated globally.
R2 Object Storage: S3-compatible storage with no egress fees.
Durable Objects: Stateful serverless computing for real-time features.

Accessing Cloudflare Bindings

Pass environment to Hono server in ~manic.ts:

// ~manic.ts
import { createManicServer } from 'manicjs/server';
import app from './app/index.html';

const server = createManicServer({
  getApp: () => import('./app').then((m) => m.default),
});

export default {
  async fetch(request: Request, env: any, ctx: any) {
    // Inject bindings into Hono context
    return server.fetch(request, {
      env,
      ctx,
    });
  },
};

Then access in routes:

// app/api/data/index.ts
export async function GET({ request, env }: any) {
  // Access KV, D1, R2, etc.
  const data = await env.KV.get('cache-key');
  return Response.json({ data });
}

Development

Use wrangler dev to test locally:

wrangler dev

This emulates Cloudflare's edge environment, including all bindings.

Performance Tips

Minimize bundle size — use manic build with OXC minification (done by default).
Cache aggressively — use KV for frequent lookups.
Use Durable Objects for state — don't rely on global variables.
Stream responses — use ReadableStream for large payloads.

Cloudflare

On this page