INTEGRITY Cloudflare Docs

← Workers / workers / local-development

Share a local dev server

You can expose your local dev server over a Cloudflare 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 and the Cloudflare 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, or a stable hostname via a named tunnel.

Wrangler

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.

To use a named tunnel, run:

npx wrangler dev --tunnel-name=my-tunnel

Use --tunnel if you want the tunnel to open automatically when Wrangler starts.

npx wrangler dev --tunnel

Cloudflare Vite plugin

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:

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

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

export default defineConfig({
	plugins: [
		cloudflare({
			tunnel: { name: "my-tunnel" },
		}),
	],
});

If you want the tunnel to open automatically when Vite starts, set tunnel.autoStart to true.

When using vite preview, Vite's preview host validation still applies:

For example:

vite.config.js
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" },
		}),
	],
});
vite.config.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" },
		}),
	],
});

Security considerations

Anyone with the tunnel URL can reach your dev server, so review what your app exposes before enabling a tunnel.