Vike

import { AutoconfigDiagram, Steps, PackageManagers } from "/components"; import { Tabs, TabItem } from '/components';

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

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

:::tip[Already have a Vike project?] Run wrangler deploy in a project without a Wrangler configuration file and Wrangler will automatically detect Vike, generate the necessary configuration, and deploy your project.

Learn more about automatic project configuration. :::

<AutoconfigDiagram framework="Vike" configs={[ { label: "main", file: "wrangler.jsonc", value: "dist/server/index.js" }, { label: "assets", file: "wrangler.jsonc", value: "directory: dist/client" }, { label: "compatibility_flags", file: "wrangler.jsonc", value: "nodejs_compat" }, { label: "observability", file: "wrangler.jsonc", value: "enabled: true" }, ]} />

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

2.   import type { Config } from 'vike/types'
   + import vikePhoton from 'vike-photon/config'
   
     export default {
   +   extends: [vikePhoton]
     } satisfies Config
   

3.   {
       "scripts": {
         "dev": "vike dev",
   +     "preview": "vike build && vike preview",
   +     "deploy": "vike build && wrangler deploy"
       }
     }
   

   + {
   +   "$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. + .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.

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

Example of using Cloudflare D1: 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.

Then commit:

git commit -am "update cloudflare types"

Make sure TypeScript loads it:

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

See also: Cloudflare Workers > TypeScript.

See also

• Vike Docs > Cloudflare