Search
Docs Menu
API
Get Started
Edit this page

Cloudflare

We recommend using the vike-cloudflare extension to deploy your app to Cloudflare.

You can use vike.dev/new to scaffold a Vike app that uses vike-cloudflare.

vike-cloudflare

The vike-cloudflare extension enables zero-configuration deployment to

Pre-rendered pages are deployed as static files, and SSR'd pages as Pages Functions (which use Cloudflare Workers under the hood).

Without a server

// +config.js
 
import vikeCloudflare from "vike-cloudflare/config";
 
export default {
  plugins: [vikeCloudflare]
}

With a server

vike-cloudflare currently supports Hono and HatTip.

// +config.js
 
import vikeCloudflare from "vike-cloudflare/config";
 
export default {
  plugins: [vikeCloudflare],
  server: {
    entry: "server/index.js"
  }
}
// server/index.js
 
import { Hono } from "hono";
import { apply } from "vike-cloudflare/hono";
import { serve } from "vike-cloudflare/hono/serve";
 
function startServer() {
  const app = new Hono();
  const port = process.env.PORT || 3000;
 
  apply(app);
 
  return serve(app, { port: +port });
}
 
export default startServer();

Accessing Cloudflare APIs in development

You can use wrangler's getPlatformProxy() to access Cloudflare APIs (such as D1 and KV) in development.

For example, this is what pnpm create vike@latest --react --hono --drizzle --cloudflare uses to access Cloudflare D1 during development:

import type { D1Database } from "@cloudflare/workers-types";
import type { RuntimeAdapter } from "@universal-middleware/core";
 
/**
 * Retrieve Cloudflare `env.DB` from `universal-middleware` runtime
 */
export async function getDbFromRuntime(runtime: RuntimeAdapter): Promise<D1Database> {
  if (runtime.runtime === "workerd") {
    return runtime.env!.DB as D1Database;
  }
 
  // When running on node, simulate Cloudflare environment with "wrangler"
  const { getPlatformProxy } = await import("wrangler");
 
  const { env } = await getPlatformProxy();
  return env.DB as D1Database;
}

Extend 3MB limit

By default the bundle size of your worker cannot exceed 3MB, but you can request sizes of up to 100MB and beyond.

Manual integration

Instead of using vike-cloudflare, you can manually integrate your app with Cloudflare yourself.

Cloudflare Pages

For a manual integration, we generally recommend using:

Examples:

Wrangler

You can also directly use Cloudflare Workers instead of using Cloudflare Pages.

Cloudflare Workers requires your entire worker code to be bundled into a single file — you can use Wrangler to achieve that (it uses esbuild under the hood).

Cloudflare uses the term "worker code" to denote server code that is run on its edge infrastructure.

Examples:

Development

For a significantly faster development experience we recommend, whenever possible, using Vite's development server (or a server such as Express.js or Hono) instead of Wrangler.

In other words:

  • Skip wrangler / Cloudflare Workers altogether while developing your app.
  • Use wrangler dev to preview your worker.
  • Use wrangler publish to deploy your worker to Cloudflare Workers.

Examples:

Universal fetch()

When using Node.js(/Bun/Deno) for development and Cloudflare Workers for production, you may need a fetch() function that works in both environments.

You can define a fetch function at pageContext.fetch that works in all environments. The trick is to add a different fetch() implementation to pageContextInit at renderPage(pageContextInit).

Example: /examples/cloudflare-workers-react-full#universal-fetch.

Libraries such as node-fetch or cross-fetch typically don't work with Cloudflare Workers.

See also