Skip to content
Cloudflare Docs

Vike

You can deploy your Vike ↗ app to Cloudflare using the Vike extension vike-photon ↗.

All app types (SSR/SPA/SSG) are supported.

What is Vike?

Vike ↗ is a Next.js/Nuxt alternative for advanced applications, powered by a modular architecture for unprecedented flexibility and stability.

New app

Use vike.dev/new ↗ to scaffold a new Vike app that uses vike-photon with @photonjs/cloudflare.

Add to existing app

  1. Terminal window
    npm i wrangler vike-photon @photonjs/cloudflare
  2. pages/+config.ts
    import type { Config } from 'vike/types'
    import vikePhoton from 'vike-photon/config'
    

    export default {
      extends: [vikePhoton]
    } satisfies Config
  3. package.json
    {
      "scripts": {
        "dev": "vike dev",
        "preview": "vike build && vike preview",
        "deploy": "vike build && wrangler deploy"
      }
    }
    wrangler.jsonc
    {
      "$schema": "node_modules/wrangler/config-schema.json",
      "compatibility_date": "2025-08-06",
      "name": "my-vike-cloudflare-app",
      "main": "virtual:photon:cloudflare:server-entry",
      // Only required if your app depends a Node.js API
      "compatibility_flags": ["nodejs_compat"]
    }
  4. .gitignore
    .wrangler/

  5. (Optional) By default, Photon uses a built-in server that supports basic features like SSR. If you need additional server functionalities (e.g. file uploads ↗ or API routes ↗), then create your own server ↗.

Cloudflare APIs (bindings)

To access Cloudflare APIs (such as D1 and KV), use bindings which are available via the env object imported from cloudflare:workers.

TypeScript
import { env } from 'cloudflare:workers'
// Key-value store
env.KV.get('my-key')
// Environment variable
env.LOG_LEVEL
// ...

Example of using Cloudflare D1:

Terminal window
npm create vike@latest -- --react --hono --drizzle --cloudflare

Or go to vike.dev/new ↗ and select Cloudflare with an ORM.

TypeScript

If you use TypeScript, run wrangler types whenever you change your Cloudflare configuration to update the worker-configuration.d.ts file.

Terminal window
npx wrangler types

Then commit:

Terminal window
git commit -am "update cloudflare types"

Make sure TypeScript loads it:

tsconfig.json
{
  "compilerOptions": {
    "types": ["./worker-configuration.d.ts"]
 }
}

See also: Cloudflare Workers > TypeScript.

See also