vite-plugin-dev-urls

Display custom development URLs in the Vite CLI after the dev server starts.

Useful for multi-domain local setups, reverse proxies, DDEV environments, or any situation where Vite's default URL list doesn't tell the whole story.

Example Output

VITE v8.0.9  ready in 419 ms

➜  Local:   http://localhost:1234/
➜  Network: http://192.168.107.2:1234/
➜  Network: http://192.168.97.4:1234/
➜  press h + enter to show help

🌐 Multi-Site Vite Dev Server:
➜  HTTPS: https://example.ddev.site/
➜  HTTPS: https://example.ddev.site/admin

Installation

npm install -D vite-plugin-dev-urls

Usage

import { defineConfig } from 'vite'
import { devUrlsPlugin } from 'vite-plugin-dev-urls'

export default defineConfig({
  plugins: [
    devUrlsPlugin({
      urls: [
        'https://example.ddev.site',
        'https://example.ddev.site/admin'
      ],
      introMessage: '🌐 Multi-site dev URLs:',
      label: 'HTTPS'
    })
  ]
})

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | urls | string \| string[] | — | A single URL or list of URLs to print. | | introMessage | string | "Development URLs:" | Label printed above the URL list. | | delay | number | 100 | Milliseconds to wait before printing, so URLs appear after Vite's startup output. | | label | string | "URL" | Short label printed before each URL. |

Local Development

npm install
npm run typecheck
npm run build

Publishing

npm publish --access public