Installation
Install the required dependencies:Configuration
import react from "@vitejs/plugin-react";
import alchemy from "alchemy/cloudflare/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [alchemy(), react()],
});
import alchemy from "alchemy";
import { KVNamespace, Vite, Worker } from "alchemy/cloudflare";
const app = await alchemy("my-vite-app");
const kv = await KVNamespace("kv", {
title: `${app.name}-${app.stage}-kv`,
});
const website = await Vite("website", {
entrypoint: "src/index.ts",
bindings: {
KV: kv,
API_KEY: alchemy.secret.env.API_KEY,
VITE_PUBLIC_DOMAIN: Worker.DevDomain,
},
dev: {
command: "vite dev --port 5173",
domain: "localhost:5173",
},
});
console.log({
url: website.url,
});
await app.finalize();
Configuration Options
TheVite resource extends Website and accepts all its properties:
Properties
entrypoint(optional): Path to the worker entrypoint file- Default:
undefined(SPA mode)
- Default:
assets(optional): Path to static assets directory- Default:
dist/client(if entrypoint provided), otherwisedist
- Default:
bindings: Cloudflare bindings (KV, R2, D1, etc.)dev: Local development configurationbuild: Build command override- Default: Automatically detected from package manager
Server-Side Rendering
For SSR applications, provide an entrypoint:Local Development
The Alchemy Vite plugin automatically:- Configures Cloudflare Workers runtime
- Provides access to bindings in development
- Ignores
.alchemydirectory from file watching
Related Resources
- Website - Base resource for web applications
- Worker - Cloudflare Workers deployment
- KV Namespace - Key-value storage