Website

The Website resource deploys a static website to Cloudflare Pages with an optional Worker for server-side functionality.

Minimal Example

Deploy a static site from a local directory:

import { Website } from "alchemy/cloudflare";

const site = await Website("my-site", {
  name: "my-site",
  command: "npm run build",
  assets: "./dist",
});

With Custom Worker

Add server-side functionality with a Worker:

const site = await Website("my-site", {
  name: "my-site",
  command: "npm run build",
  assets: "./dist",
  main: "./src/worker.ts",
  bindings: {
    DB: database,
    API_KEY: alchemy.secret(process.env.API_KEY),
  },
});

With Advanced Configuration

Configure caching, routing and other options:

const site = await Website("my-site", {
  name: "my-site",
  command: "npm run build",
  assets: {
    dist: "./dist",
    html_handling: "force-trailing-slash",
    not_found_handling: "single-page-application",
    _headers: "/*\n  Cache-Control: public, max-age=3600",
    _redirects: "/old/* /new/:splat 301",
  },
  compatibilityFlags: ["nodejs_compat"],
  wrangler: true,
});

Bind to a Worker

Use the Website’s assets in another Worker:

import { Worker, Website } from "alchemy/cloudflare";

const site = await Website("my-site", {
  command: "npm run build",
  assets: "./dist",
});

await Worker("api", {
  name: "api-worker",
  script: "console.log('Hello')",
  bindings: {
    ASSETS: site,
  },
});

With Transform Hook

The transform hook allows you to customize the wrangler.json configuration. For example, adding a custom environment variable:

await Website("my-app", {
  transform: {
    wrangler: (spec) => ({
      ...spec,
      vars: {
        ...spec.vars,
        CUSTOM_VAR: "value",
      },
    }),
  },
});