Get started (59)

Last updated Oct 12, 2026 Note

This guide demonstrates creating a standalone Worker from scratch. If you would instead like to create a new application from a ready-to-go template, refer to the TanStack Start, React Router, React or Vue framework guides.

Start with a basic package.json

package.jsonjson

{
    "name": "cloudflare-vite-get-started",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "npm run build && vite preview",
        "deploy": "npm run build && wrangler deploy"
    }
}

Note

Ensure that you include "type": "module" in order to use ES modules by default.

Install the dependencies

npmyarnpnpmbun

npm i -D vite @cloudflare/vite-plugin wrangler

yarn add -D vite @cloudflare/vite-plugin wrangler

pnpm add -D vite @cloudflare/vite-plugin wrangler

bun add -d vite @cloudflare/vite-plugin wrangler

Create your Vite config file and include the Cloudflare plugin

vite.config.tsts

import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
    plugins: [cloudflare({ viteEnvironment: { name: "worker" } })],
    environments: {
        worker: { build: { sourcemap: true } },
    },
});

The Cloudflare Vite plugin looks for a wrangler.jsonc, wrangler.json or wrangler.toml in the root of your application.

Refer to the API reference for configuration options.

Create your Worker config file

{
    "$schema": "./node_modules/wrangler/config-schema.json",
    "name": "cloudflare-vite-get-started",
    // Set this to today's date
    "compatibility_date": "2026-10-27",
    "main": "./src/index.ts",
    "upload_source_maps": true
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "cloudflare-vite-get-started"
# Set this to today's date
compatibility_date = "2026-10-27"
main = "./src/index.ts"
upload_source_maps = true

The name field specifies the name of your Worker. The viteEnvironment.name option in the Vite configuration above sets the Worker's Vite Environment to worker. If omitted, the plugin uses the Worker name (see Vite Environments for more information). The main field specifies the entry file for your Worker code.

For more information about the Worker configuration, see Configuration.

The worker environment generates source maps for your Worker. The client environment keeps its existing source map settings.

Create your Worker entry file

src/index.tsts

export default {
    fetch() {
        return new Response(`Running in ${navigator.userAgent}!`);
    },
};

A request to this Worker will return 'Running in Cloudflare-Workers!', demonstrating that the code is running inside the Workers runtime.

Dev, build, preview and deploy

You can now start the Vite development server (npm run dev), build the application (npm run build), preview the built application (npm run preview), and deploy to Cloudflare (npm run deploy).

Was this helpful?

YesNo

On this page

Get started (59) - 图1Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/workers/vite-plugin/get-started/#page","headline":"Get started","description":"Get started with the Vite plugin","url":"https://developers.cloudflare.com/workers/vite-plugin/get-started/","inLanguage":"en","image":"https://developers.cloudflare.com/workers/vite-plugin/get-started/og.png?v=2eb6967b7d478d0d","dateModified":"2026-10-12","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: Vite plugin API title: API image: https://developers.cloudflare.com/workers/vite-plugin/reference/api/og.png?v=c08a17f641408034

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/workers/llms.txt
Use this file to discover all available pages before exploring further.