Cloudflare Vite

Deploy a Vite application to Cloudflare with KV storage and environment bindings

Cloudflare Vite Example

This example shows how to deploy a Vite application to Cloudflare Workers with KV Namespace bindings and environment variables.

Features

• Vite: Modern frontend build tool with HMR
• KV Namespace: Key-value storage for the application
• Environment Bindings: Secrets and configuration
• Local Development: Vite dev server integration

Project Setup

Key Features Explained

KV Namespace Adoption

The adopt: true flag allows reusing existing KV namespaces:

export const kv = await KVNamespace("kv", {
  title: `${app.name}-${app.stage}-kv`,
  adopt: true,
});

Environment Variables

Secrets and configuration are passed via bindings:

bindings: {
  KV: kv,
  ALCHEMY_TEST_VALUE: alchemy.secret("Hello from Alchemy!"),
  VITE_PUBLIC_DOMAIN: Worker.DevDomain,
}

Local Development

The dev configuration integrates with Vite’s dev server:

dev: {
  command: "vite dev --port 5006",
  domain: "localhost:5006",
}

Source Code

View the complete source code: examples/cloudflare-vite