local-development

136 notes in this subject, read out of this brain and free to use. This is page 3 of 3.

Vite plugin supports hot module replacement and preview command

The Vite plugin leverages Vite's hot module replacement for consistently fast updates and supports the vite preview command for previewing build output in the Workers runtime prior to deployment.

PluginConfig.tunnel field

tunnel is an optional field that can be a boolean or an object with name and autoStart properties. When enabled, it exposes the local dev server over a Cloudflare Tunnel. The name property allows configuring a named tunnel. The autoStart property controls whether the tunnel starts automatically when Vite starts. Press 't + Enter' to manually start or close the tunnel.

cloudflare() tunnel configuration example

Example of configuring a named tunnel in vite.config.ts: ```ts import { defineConfig } from "vite"; import { cloudflare } from "@cloudflare/vite-plugin"; export default defineConfig({ plugins: [ cloudflare({ tunnel: { name: "my-tunnel" }, }), ], }); ```

VS Code debugger configuration for Vite plugin

To set up VS Code for breakpoint debugging with the Vite plugin, create a .vscode/launch.json file with type: "node", request: "attach", and websocketAddress: "ws://localhost:9229/<NAME_OF_WORKER>" where <NAME_OF_WORKER> is the name from your Worker config file. Include sourceMaps: true, resolveSourceMapLocations: null, attachExistingChildren: false, and autoAttachChildProcesses: false. If using a custom inspectorPort, update the websocketAddress with that port number. For multiple Workers, add a configuration entry for each Worker in the configurations array and include each in the compounds configurations array. Run vite dev or vite preview, then select Debug Workers from the Run & Debug panel to start debugging.

Vite plugin debugging enabled by default on port 9229

The Cloudflare Vite plugin has debugging enabled by default and listens on port 9229. You can choose a custom port or disable debugging by setting the inspectorPort option in the plugin config.

DevTools debugging via /__debug route

When running vite dev or vite preview, a /__debug route is automatically added that provides access to Cloudflare's implementation of Chrome DevTools. Navigating to this route opens a DevTools tab for each Worker in your application. Once the tab is open, you can make a request to your application and start debugging your Worker code. When debugging multiple Workers, you may need to allow your browser to open pop-ups.

VS Code launch.json configuration template

{ "configurations": [ { "name": "<NAME_OF_WORKER>", "type": "node", "request": "attach", "websocketAddress": "ws://localhost:9229/<NAME_OF_WORKER>", "resolveSourceMapLocations": null, "attachExistingChildren": false, "autoAttachChildProcesses": false, "sourceMaps": true } ], "compounds": [ { "name": "Debug Workers", "configurations": ["<NAME_OF_WORKER>"], "stopAll": true } ] }

Local development with .dev.vars file

In local development, secrets can be provided to your Worker by using a .dev.vars file.

Cloudflare Environments with .dev.vars selection

If you are using Cloudflare Environments, the relevant .dev.vars file will be selected automatically. For example, running CLOUDFLARE_ENV=staging vite dev will load .dev.vars.staging if it exists and fall back to .dev.vars if it does not.

vite build copies .dev.vars to output

The vite build command copies the relevant .dev.vars file to the output directory. This file is only used when running vite preview and is not deployed with your Worker.

Vite plugin preserves UI state during development

With Vite and the Cloudflare plugin, you can iterate on both client and server parts of the application together, and UI state is preserved between edits.

Run npm run preview to test build locally

Run npm run preview to validate that the build output runs as expected locally in the Workers runtime, which closely matches production behavior.

Start local Worker development server with wrangler dev

Run 'npx wrangler dev' to start a local development server for a Rust Worker. This spins up a localhost instance where you can test the Worker before deployment.

Create new Worker project with npm create

Create a new Worker project by running 'npm create cloudflare@latest -- project-name' where project-name is your desired project name. This generates a new JavaScript Worker project structure.

Test Worker locally with npm run dev

Start the local development server with 'npm run dev'. The development server will start and your API can be accessed at http://localhost:8787.

Use C3 to create new Cloudflare Workers project

Use the C3 command-line tool to create a new Cloudflare Workers project. Run 'npm create cloudflare@latest -- <project-name>' or 'npm create cloudflare@latest -- express-d1-app' to create a new project directory and initialize a Worker.

Give your agent this brain