Skip to content
Vite Deploy

@vite-deploy/cloudflare

v0.0.0 GitHub npm Changelog

This adapter allows you to deploy your Vite project to Cloudflare. Learn how in our Cloudflare Workers deployment guide.

Cloudflare’s Developer Platform lets you develop full-stack applications with access to resources such as storage and AI, all deployed to a global edge network. This adapter builds your Vite project for deployment through Cloudflare.

Installation

Section titled “Installation”

Starter template

Section titled “Starter template”

  1. Download a basic template for your favorite host:

    Terminal window
    npx giget@latest gh:web-runes/vite-deploy/examples/cloudflare-server

  2. Install dependencies:

    Terminal window
    npm install

  3. Start the development server:

    Terminal window
    npm run dev

Manual install

Section titled “Manual install”

The following steps assume you already have a Vite project.

  1. Add @vite-deploy/cloudflare and wrangler to your project’s dependencies using your preferred package manager:

    Terminal window
    npm install @vite-deploy/cloudflare wrangler

  2. Add the plugin to your Vite config file:

    vite.config.js
    import cloudflare from "@vite-deploy/cloudflare";
    import { defineConfig } from "vite";
    

    export default defineConfig({
      plugins: [cloudflare({
        output: "server"
      })]
    });

  3. Add a NPM script to generate types:

    package.json
    {
      "scripts": {
        // ...
        "cf-typegen": "wrangler types"
      }
    }

  4. Update your TypeScript config file to include necessary types:

    tsconfig.json
    {
      "compilerOptions": {
        "types": [
          "vite/client",
          "@vite-deploy/cloudflare/types"
        ]
      },
      "include": [
        "src",
        "worker-configuration.d.ts"
      ]
    }

  5. Create a wrangler.jsonc config file:

    wrangler.jsonc
    {
      "$schema": "./node_modules/wrangler/config-schema.json",
      "name": "your-site",
      // Set this to today's date
      "compatibility_date": "2026-03-17",
      "main": "./src/worker.ts",
    }

  6. Create the worker entrypoint:

    src/worker.ts
    export default {
      fetch(request) {
        const url = new URL(request.url);
        return new Response(`Running ${url.pathname} in ${navigator.userAgent}!`);
      },
    } satisfies ExportedHandler<Env>;

  7. Start the development server:

    Terminal window
    npm run dev

Worker entrypoint

Section titled “Worker entrypoint”

To handle requests, you need a worker. The main field in your wrangler config file specifies what module should be used. It accepts:

  • Paths relative to Vite’s root: ./src/prerender.ts.
  • Absolute paths: /foo/prerender.ts.
  • Package specifiers: @my-pkg/prerender.
wrangler.jsonc
{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "your-site",
  // Set this to today's date
  "compatibility_date": "2026-03-17",
  "main": "./src/worker.ts",
}

You then need to implement the worker:

src/worker.ts
export default {
  fetch(request, env, ctx) {
    const url = new URL(request.url);
    return new Response(`Running ${url.pathname} in ${navigator.userAgent}!`);
  },
} satisfies ExportedHandler<Env>;

Options

Section titled “Options”

The Cloudflare adapter accepts output related options. It also accepts the following:

config

Section titled “config”

Type: PluginConfig | undefined
Default: undefined

Options forwarded to @cloudflare/vite-plugin, except viteEnvironment:

vite.config.js
import cloudflare from "@vite-deploy/cloudflare";
import { defineConfig } from "vite";


export default defineConfig({
  plugins: [cloudflare({
    // ...
    config: {
      inspectorPort: 9230
    }
  })]
});

Node.js compatibility

Section titled “Node.js compatibility”

Cloudflare Workers support most Node.js runtime APIs through the nodejs_compat compatibility flag. This includes commonly used modules like node:buffer, node:crypto, node:path, and many others. See the full list of supported Node.js APIs in Cloudflare’s documentation.

To enable Node.js compatibility, add the nodejs_compat flag to your Wrangler configuration:

wrangler.jsonc
{
  "compatibility_flags": ["nodejs_compat"],
}

Then use the node:* import syntax in your server-side code:

import { Buffer } from 'node:buffer';

For Node.js APIs not yet supported in the Workers runtime, Wrangler can inject polyfills (requires nodejs_compat and a compatibility date of 2024-09-23 or later).