Pular para o conteúdo

Vike

Atualizado em Ver como Markdown

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

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

Vike Detected
Generated configuration
wrangler.jsonc
main: dist/server/index.js
wrangler.jsonc
assets: directory: dist/client
wrangler.jsonc
compatibility_flags: nodejs_compat
wrangler.jsonc
observability: enabled: true
Workers Deployed
Wrangler handles configuration automatically

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. 
								
									
									npm
									 i wrangler vike-photon @photonjs/cloudflare
  2. pages/+config.tsdiff
      import type { Config } from 'vike/types'
+ import vikePhoton from 'vike-photon/config'

  export default {
+   extends: [vikePhoton]
  } satisfies Config
  3. package.jsondiff
      {
    "scripts": {
      "dev": "vike dev",
+     "preview": "vike build && vike preview",
+     "deploy": "vike build && wrangler deploy"
    }
  }
    wrangler.jsoncdiff
    + {
+   "$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. .gitignorediff
    + .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:


								
									
									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.


								
									
									npx
									 wrangler types

Then commit:

git commit -am "update cloudflare types"

Make sure TypeScript loads it:

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

See also: Cloudflare Workers > TypeScript.

See also