Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions src/content/changelog/workers/2026-05-15-local-dev-tunnels.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
title: Share local dev servers through Cloudflare Tunnel in Wrangler and Vite
description: You can now share local dev servers through Cloudflare Tunnel from Wrangler and the Cloudflare Vite plugin, with support for quick tunnels and named tunnels.
products:
- workers
date: 2026-05-15
---

You can now share local dev sessions through [Cloudflare Tunnel](/tunnel/) and get a public URL when using either [Wrangler](/workers/wrangler/) or the [Cloudflare Vite plugin](/workers/vite-plugin/). This is useful when you need to share a preview, test a webhook, or access your app from another device.

![Vite local dev tunnel demo](~/assets/images/changelog/workers/vite-local-dev-tunnel.gif)

This lets you either:

- start a temporary [Quick tunnel](/tunnel/setup/#quick-tunnels-development) with a random `*.trycloudflare.com` hostname, or
- use an existing [named tunnel](/tunnel/setup/#create-a-tunnel) for a stable hostname and to restrict access with [Cloudflare Access](/cloudflare-one/access-controls/).

To start a tunnel, press `t` in Wrangler or `t + Enter` in Vite while your dev server is running. For details, refer to [Share a local dev server](/workers/development-testing/local-dev-tunnels/).
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,31 @@ description: Expose a local Wrangler or Vite dev server over a public tunnel URL

import { PackageManagers, TypeScriptExample } from "~/components";

You can expose your local dev server over a [Cloudflare Quick Tunnel](/tunnel/setup/#quick-tunnels-development) when you need to share a preview, test a webhook, or access your app from another device. This provides a random `*.trycloudflare.com` hostname for the current dev session.
You can expose your local dev server over a [Cloudflare Tunnel](/tunnel/) when you need to share a preview, test a webhook, or access your app from another device.

This page covers tunnel support in [Wrangler](/workers/wrangler/commands/general/#dev) and the [Cloudflare Vite plugin](/workers/vite-plugin/).

## Start a tunnel

You can start a tunnel with Wrangler or the Cloudflare Vite plugin for the current session. This gives you either a random `*.trycloudflare.com` hostname via a [Quick tunnel](/tunnel/setup/#quick-tunnels-development), or a stable hostname via a [named tunnel](/tunnel/setup/#create-a-tunnel).

**Wrangler**

Run `wrangler dev --tunnel`:
Run `wrangler dev`, then press `[t]` to start or close the tunnel. Wrangler will print the public tunnel URL or URLs for the current session.

<PackageManagers type="exec" pkg="wrangler" args="dev --tunnel" />
To use a named tunnel, run:

<PackageManagers type="exec" pkg="wrangler" args="dev --tunnel-name=my-tunnel" />

Wrangler will print the public tunnel URL for the current dev session.
Use `--tunnel` if you want the tunnel to open automatically when Wrangler starts.

<PackageManagers type="exec" pkg="wrangler" args="dev --tunnel" />

**Cloudflare Vite plugin**

Enable `tunnel` conditionally in the plugin config:
Run `vite dev`, then press `t + Enter` to start or close the tunnel. Add `tunnel` to the plugin config if you want to configure a named tunnel or have the tunnel open automatically when Vite starts.

To use a named tunnel with stable hostnames:

<TypeScriptExample filename="vite.config.ts">
```ts
Expand All @@ -35,26 +43,44 @@ import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
tunnel: process.env.ENABLE_DEV_TUNNEL === "true",
tunnel: { name: "my-tunnel" },
}),
],
});
```
</TypeScriptExample>

Then enable the tunnel only for the sessions where you want a public URL:
If you want the tunnel to open automatically when Vite starts, set `tunnel.autoStart` to `true`.

```sh
ENABLE_DEV_TUNNEL=true vite dev # or "vite preview"
```
When using `vite preview`, Vite's preview host validation still applies:

- For Quick tunnel, add `.trycloudflare.com` to `preview.allowedHosts`.
- For named tunnel, add the resolved hostnames or a matching domain suffix such as `.my-domain.com` to `preview.allowedHosts`.

Once the tunnel opens:
For example:

- The public tunnel URL is printed in the terminal for the current dev session.
- The session expires after 1 hour by default.
- A reminder is logged every 10 minutes while the tunnel is open.
- You can extend the tunnel by 1 hour at a time, either by pressing `t` for Wrangler or `t + Enter` for Vite.
- The tunnel can be extended up to 3 hours of remaining time.
<TypeScriptExample filename="vite.config.ts">
```ts
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
preview: {
allowedHosts: [
// For Quick tunnels:
".trycloudflare.com",
// For named tunnels:
".my-domain.com"
],
},
plugins: [
cloudflare({
tunnel: { name: "my-tunnel" },
}),
],
});
```
</TypeScriptExample>

## Security considerations

Expand Down
23 changes: 20 additions & 3 deletions src/content/docs/workers/vite-plugin/reference/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ products:
- workers
---

import { Type, MetaInfo } from "~/components";
import { Type, MetaInfo, TypeScriptExample } from "~/components";

## `cloudflare()`

Expand Down Expand Up @@ -76,9 +76,26 @@ It accepts an optional `PluginConfig` parameter.

See [Debugging](/workers/vite-plugin/reference/debugging/) for more information.

- `tunnel` <Type text='boolean' /> <MetaInfo text='optional' />
- `tunnel` <Type text='boolean | { name?: string; autoStart?: boolean }' /> <MetaInfo text='optional' />

Open a publicly reachable Cloudflare Quick Tunnel for sharing a preview, testing webhooks, or accessing the app from another device.
Expose your local dev server over a [Cloudflare Tunnel](/tunnel/).

Provide an object to configure a named tunnel or control whether the tunnel starts automatically. Press `t + Enter` to start or close the tunnel. Set `tunnel.autoStart` to `true` if you want the tunnel to open when Vite starts.

<TypeScriptExample filename="vite.config.ts">
```ts
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
plugins: [
cloudflare({
tunnel: { name: "my-tunnel" },
}),
],
});
```
</TypeScriptExample>

See [Share a local dev server](/workers/development-testing/local-dev-tunnels/) for more information.

Expand Down
5 changes: 3 additions & 2 deletions src/content/docs/workers/wrangler/commands/workers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,9 @@ None of the options for this command are required. Many of these options can be
- `--remote` <Type text="boolean" /> <MetaInfo text="(default: false) optional" />
- Develop against remote resources and data stored on Cloudflare's network.
- `--tunnel` <Type text="boolean" /> <MetaInfo text="(default: false) optional" />
- Open a publicly reachable Cloudflare Quick Tunnel for sharing a preview, testing webhooks, or accessing the app from another device.
- For more information, refer to [Share a local dev server](/workers/development-testing/local-dev-tunnels/).
- Expose your local dev server over a Cloudflare Tunnel. For more information, refer to [Share a local dev server](/workers/development-testing/local-dev-tunnels/).
- `--tunnel-name` <Type text="string" /> <MetaInfo text="optional" />
- Use an existing named Cloudflare Tunnel. Combine with `--tunnel` to open it automatically at startup.
- `--test-scheduled` <Type text="boolean" /> <MetaInfo text="(default: false) optional" />
- Exposes a `/__scheduled` fetch route which will trigger a scheduled event (Cron Trigger) for testing during development. To simulate different cron patterns, a `cron` query parameter can be passed in: `/__scheduled?cron=*+*+*+*+*` or `/cdn-cgi/handler/scheduled?cron=*+*+*+*+*`.
- `--log-level` <Type text="'debug'|'info'|'log'|'warn'|'error|'none'" /> <MetaInfo text="(default: log) optional" />
Expand Down