[Workers] update local dev tunnel guides and add changelog (#30822)

* docs(workers): add local dev tunnel guides and changelog

* preview future chanelog

* tighten changelog wording

* link to access control and update demo gif

* Clarify tunnel starting instructions in changelog

Updated instructions for starting a tunnel and added details on named tunnels.

---------

Co-authored-by: Matt ‘TK’ Taylor <matttaylor@cloudflare.com>

Author: edmundhung

src/assets/images/changelog/workers/vite-local-dev-tunnel.gif

@@ -0,0 +1,19 @@
+---
+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-18
+publish_future_dated_entry: true
+---
+
+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 on setting up a named tunnel, refer to [Share a local dev server](/workers/development-testing/local-dev-tunnels/).

src/content/changelog/workers/2026-05-18-local-dev-tunnels.mdx

@@ -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
@@ -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
 

src/content/docs/workers/development-testing/local-dev-tunnels.mdx

@@ -8,7 +8,7 @@ products:
   - workers
 ---
 
-import { Type, MetaInfo } from "~/components";
+import { Type, MetaInfo, TypeScriptExample } from "~/components";
 
 ## `cloudflare()`
 
@@ -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.
 

src/content/docs/workers/vite-plugin/reference/api.mdx

@@ -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" />