Skip to content
Alchemy
GitHubXDiscord

Vite

This guide shows how to initialize and deploy a Vite.js React TypeScript application to Cloudflare using Alchemy.

Init

Section titled “Init”

Start by creating a new Vite.js project with Alchemy:

Terminal window
bunx alchemy create my-react-app --template=vite
cd my-react-app

Log in to Cloudflare

Section titled “Log in to Cloudflare”

Authenticate once with your Cloudflare account:

Terminal window
bun wrangler login

Deploy

Section titled “Deploy”

Run the deploy script generated by the template:

Terminal window
bun run deploy

You’ll get the live URL of your Vite.js site:

Terminal window
{
  url: "https://website.<your-account>.workers.dev",
}

Local Development

Section titled “Local Development”

Work locally using the dev script:

Terminal window
bun run dev

Destroy

Section titled “Destroy”

Clean up all Cloudflare resources created by this stack:

Terminal window
bun run destroy

What files are created

Section titled “What files are created”

.env

Section titled “.env”

Alchemy requires a locally set password to encrypt Secrets that are stored in state. Be sure to change this.

ALCHEMY_PASSWORD=change-me

alchemy.run.ts

Section titled “alchemy.run.ts”
/// <reference types="@types/node" />


import alchemy from "alchemy";
import { Vite } from "alchemy/cloudflare";


const app = await alchemy("my-react-app");


export const worker = await Vite("website", {
  main: "./worker/index.ts",
  command: "bun run build",
});


console.log({
  url: worker.url,
});


await app.finalize();

types/env.d.ts

Section titled “types/env.d.ts”
// Auto-generated Cloudflare binding types.
// @see https://alchemy.run/concepts/bindings/#type-safe-bindings


import type { worker } from "../alchemy.run.ts";


export type CloudflareEnv = typeof worker.Env;


declare global {
  type Env = CloudflareEnv;
}


declare module "cloudflare:workers" {
  namespace Cloudflare {
    export interface Env extends CloudflareEnv {}
  }
}

tsconfig.json

Section titled “tsconfig.json”

The CLI updated the tsconfig.json to include alchemy.run.ts and register @cloudflare/workers-types + types/env.d.ts globally

{
  "exclude": ["test"],
  "include": ["types/**/*.ts", "src/**/*.ts", "alchemy.run.ts"],
  "compilerOptions": {
    "target": "es2021",
    "lib": ["es2021"],
    "jsx": "react-jsx",
    "module": "es2022",
    "moduleResolution": "Bundler",
    // ... (omitted for brevity)
    "types": ["@cloudflare/workers-types", "./types/env.d.ts"]
  }
}