vite.

[ add the vite plugin ]

In vite.config.ts, add tnl() alongside your existing plugins. tnl init can create the config or tell you where to add the plugin in an existing one:

import { defineConfig } from "vite";
import tnl from "@tnldotdev/tnl/vite";
 
export default defineConfig({ plugins: [tnl()] });

Use Vite 6.0.9 or newer. The plugin takes no tunnel options; set those in project configuration instead.

[ start vite with tnl ]

Set the project's dev.command to ["vite"] (and include any Vite flags you need), then run the service with tnl dev. You may set package.json's dev script to tnl dev afterward. Do not set dev.command to pnpm dev or npm run dev in that case; it would start tnl again. If your project has multiple services, pass the service name.

┌──[ vite dev ]────────────────────────────────────────────────┐
│                                                              │
│  vite listens on :5173 (or another free port)                │
│                  |                                           │
│                  ↓                                           │
│  tnl plugin --> tnl dev --> public HTTPS url                 │
│                                                              │
└──────────────────────────────────────────────────────────────┘

The plugin adds the assigned hostname to Vite's allowed hosts and registers the port Vite actually opened, even if its preferred port was taken. With tnl dev --port 5173, Vite must listen on that exact port. Vite middleware mode has no listener to publish.

[ use service urls and live reload ]

Vite makes project service URL metadata available in browser code:

import { tnl } from "@tnldotdev/tnl";
 
export const apiURL = tnl.services?.api?.url;

Hot module reload, WebSockets, and streaming work through the public HTTPS URL. The plugin leaves production builds and preview alone. For two independent checkouts, see parallel worktrees.