Skills
.Work. You
Rest

cloudflare-tunnel-vite-dev

Community

Eliminate Vite HMR 403 errors with Cloudflare Tunnel

Software Engineering#vite#dev-server#frontend-dev#hmr#cloudflare-tunnel#403-error#static-proxy
Authorfreedomw1987
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill resolves blank page rendering and 403 errors that occur when exposing a Vite development server via Cloudflare Tunnel, which are caused by blocked HMR WebSocket connections and Vite's default host restriction policies.

Core Features & Use Cases

  • HMR WebSocket 403 Fix: Eliminates errors from Cloudflare's network policies blocking Vite's Hot Module Replacement WebSocket connections.
  • Vite Configuration Guidance: Provides the required allowedHosts setting to accept requests from Cloudflare Tunnel-generated hostnames.
  • Stale Tunnel Prevention: Includes process management steps to clean up old cloudflared instances and avoid confusing dead tunnel URLs.
  • Use Case: Frontend developers can quickly share local Vite dev builds with teammates or clients for testing via a public Cloudflare Tunnel URL without running into access or loading errors.

Quick Start

Use the cloudflare-tunnel-vite-dev skill to configure your Vite project and Cloudflare Tunnel to serve your app publicly without 403 or HMR WebSocket errors.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: cloudflare-tunnel-vite-dev
Download link: https://github.com/freedomw1987/tree_monstor/archive/main.zip#cloudflare-tunnel-vite-dev

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.