{"id":22755,"library":"vite-plugin-ngrok","title":"vite-plugin-ngrok","description":"Vite plugin (v2.0.1) for automatically creating ngrok tunnels during local development, enabling instant sharing of local Vite dev servers over the internet. Uses the official @ngrok/ngrok JavaScript SDK. Supports configuration via string (auth token) or full ngrok Config object. Dynamically updates URLs on server restart or tunnel reopen. Peer dependency on Vite ^5.4.12, ^6.0.0, or ^7.0.0. Ships TypeScript types. Differentiator: minimal setup (single line plugin) vs manual ngrok CLI or separate tools.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/aphex/vite-plugin-ngrok","tags":["javascript","vite-plugin","vite","ngrok","typescript"],"install":[{"cmd":"npm install vite-plugin-ngrok","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-ngrok","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-ngrok","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core tunnel creation; this plugin wraps the official ngrok JavaScript SDK.","package":"@ngrok/ngrok","optional":false},{"reason":"Peer dependency on Vite (^5.4.12 || ^6.0.0 || ^7.0.0); required for plugin to work.","package":"vite","optional":false}],"imports":[{"note":"The plugin exports a named export 'ngrok'. Default import is not available.","wrong":"import ngrok from 'vite-plugin-ngrok'","symbol":"ngrok","correct":"import { ngrok } from 'vite-plugin-ngrok'"},{"note":"Package is ESM-only. CommonJS require will not work.","wrong":"const ngrok = require('vite-plugin-ngrok')","symbol":"default","correct":"import { ngrok } from 'vite-plugin-ngrok'"},{"note":"TypeScript type import for type-checking only. The 'ngrok' export is a function.","wrong":"","symbol":"type","correct":"import type { ngrok } from 'vite-plugin-ngrok'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { ngrok } from 'vite-plugin-ngrok'\n\nexport default defineConfig({\n  plugins: [\n    ngrok(process.env.NGROK_AUTH_TOKEN ?? ''),\n  ],\n})","lang":"typescript","description":"Basic usage: configure ngrok plugin with auth token from environment variable. Requires @ngrok/ngrok and Vite as dependencies."},"warnings":[{"fix":"Update your ngrok config object to match @ngrok/ngrok v2 API. If using string argument, API remains same.","message":"In v2.0.0, the plugin switched from @ngrok/ngrok SDK v1 to v2, which has breaking changes in configuration options (see ngrok SDK changelog).","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade Vite to ^5.4.12, ^6.0.0, or ^7.0.0.","message":"In v2.0.0, the peer dependency on Vite changed to '^5.4.12 || ^6.0.0 || ^7.0.0'. Vite versions below 5.4.12 are no longer supported.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use environment variables: load via loadEnv() or process.env, or set authtoken_from_env: true and set NGROK_AUTHTOKEN env var.","message":"Passing a plain string with the auth token directly in code is discouraged for security reasons (token stored in git).","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"This is by design. Do not expect tunnels in production builds.","message":"The plugin only creates tunnels during local dev (vite dev). It does not run during build (vite build).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If you need a specific port, set it in the ngrok config object. Otherwise, Vite's dev port is used automatically.","message":"When passing an object to ngrok(), the default port from Vite is automatically set, but any explicitly provided port will override that default.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install @ngrok/ngrok' (or your package manager equivalent) and ensure it is in your dependencies.","cause":"@ngrok/ngrok is not installed or is a missing dependency.","error":"Error: Cannot find module '@ngrok/ngrok'"},{"fix":"Use import { ngrok } from 'vite-plugin-ngrok' instead of import ngrok from 'vite-plugin-ngrok'.","cause":"Default import used instead of named import.","error":"TypeError: ngrok is not a function"},{"fix":"Ensure the object contains either authtoken: 'YOUR_TOKEN' or authtoken_from_env: true (and NGROK_AUTHTOKEN env var is set).","cause":"An object was passed to ngrok() that does not have a valid authtoken or authtoken_from_env set.","error":"Error: The 'authtoken' property must be a string"},{"fix":"Set environment variable NODE_OPTIONS=--openssl-legacy-provider or upgrade Node.js.","cause":"This error is not from vite-plugin-ngrok itself, but occurs when using ngrok tunnels with older Node.js versions (e.g., Node 17+ with OpenSSL 3).","error":"error:0308010C:digital envelope routines::unsupported"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}