@webflow/cloud-app

Build a JS framework app into a Webflow Cloud bundle that runs on Cloudflare Workers — without your app having to know anything about Cloudflare.

You declare what you need in webflow.json. @webflow/cloud-app figures out your framework (Vite, Next.js, Astro), injects the right Cloudflare adapter and config, runs the build, and produces a worker-ready output directory. No wrangler.json, no adapter packages in your package.json, no generated config files in your tree — all of that happens in an ephemeral build workspace.

Status: early. The public API and the host port seam below are stable.

Install

npm install @webflow/cloud-app

Usage

import { buildApp, consoleLogger, nodeCommandRunner } from '@webflow/cloud-app';

const result = await buildApp({
  projectDir: process.cwd(),
  outputDir: './.webflow-output',
  ports: {
    logger: consoleLogger,
    runCommand: nodeCommandRunner,
    // telemetry + fs fall back to no-op / node defaults
  },
});

console.log(result.framework, result.deploymentType, result.entrypointPath);

Ports — running the engine anywhere

Everything environment-specific is injected, so the engine itself is pure build logic: no auth, no secrets, no vendor SDKs baked in.

| Port | Required | Default | Why a host overrides it | | ------------ | -------- | ----------------------------------------- | ---------------------------------------------------------------------- | | logger | yes | consoleLogger / silentLogger provided | route output into a spinner, structured logs, etc. | | runCommand | yes | nodeCommandRunner provided | control/sandbox how npm, the framework build, and wrangler execute | | telemetry | no | noopTelemetry | forward build events into your own tracing | | fs | no | nodeFileSystem | plug in a virtual filesystem (e.g. browser-based agents) |

webflow.json

The only Webflow-owned file in your project. Framework is auto-detected (you can pin it) and bindings are declared here rather than in wrangler.json:

{
  "cloud": {
    "framework": "nextjs",
    "bindings": {
      "kv": [{ "binding": "MY_KV" }],
      "r2": [{ "binding": "MY_BUCKET", "bucket_name": "my-bucket" }],
      "d1": [{ "binding": "DB", "database_name": "app-db", "migrations_dir": "./migrations" }],
    },
  },
}

You declare the binding name (and, for R2/D1, the resource name) — Webflow Cloud provisions the resource and namespaces it per environment. KV ids / D1 database_ids are assigned for you; omit them. Limits: up to 5 of each type; R2 bucket names are lowercase alphanumeric + hyphens, ≤27 chars. (vars is not supported yet.)

The deploy-contract fields (contract_version, framework, deployment_type, entrypoint_path, skip_no_bundle) are filled in by the build and validated against @webflow/cosmic-deploy-contract before output is produced.

Development

npm install
npm test         # jest
npm run build    # tsc → dist/
npm run type-check