A vite plugin to automatically create a ngrok tunnel during local dev. This plugin uses the @ngrok/ngrok Javascript SDK
Create a Vite project
Install the plugin into your project
npm i -D vite-plugin-ngrok
vite.config.ts
file in your project root.import { loadEnv, defineConfig } from 'vite'
import { ngrok } from 'vite-plugin-ngrok'
export default defineConfig({
// Note you should not store your ngrok token in your code/repo. Make sure to move this to
// a more secure place before sharing your project.
plugins: [
ngrok('NGROK_AUTH_TOKEN_IN_HERE'),
],
})
npm run dev
The ngrok plugin can be configured in 3 ways.
authtoken_from_env
will be set to true
. This will look for NGROK_AUTHTOKEN
in your environmental variables.ngrok()
ngrok('NGROK_AUTH_TOKEN_IN_HERE'),
ngrok({
domain: 'my-domain.ngrok.app',
compression: true,
authtoken: 'NGROK_AUTH_TOKEN_IN_HERE',
...
})
You can use Vite's built in env parsing to store your ngrok token in a local file and ignore it from git.
import { loadEnv, defineConfig } from 'vite'
import { ngrok } from 'vite-plugin-ngrok'
const { NGROK_AUTH_TOKEN } = loadEnv('', process.cwd(), 'NGROK')
export default defineConfig({
plugins: [
ngrok({
authtoken: NGROK_AUTH_TOKEN,
}),
],
})