How to enable vite CLI command to automatically open localhost in your browser

[Arash-11]

Apologies in advance if this has been mentioned elsewhere but I couldn't find anything related. When I run the vite CLI command in my terminal, I then have to either click the http://localhost:3000/ link in the terminal or manually type out the localhost URL in the browser.

Is there a config option or flag or anyway that will have Vite automatically open localhost in my browser when I run vite in the CLI? For reference, I'm on Vite v2.9.6 currently.

[ydcjeff]

You can do that with server.open in config or vite --open from CLI.

[vusal5555]

I am now trying to implemenet this option but I am getting confused can you explain it to me, please?

[midcenturydude7]

In your vite.config.js file:

module.exports = defineConfig({
  server: {
    open: true,
  },
})

You can also specify the port you wish to use and auto load to (from my experience, 5173 is the default):

module.exports = defineConfig({
  server: {
    open: true,
    port: 5173,
  },
})

[midcenturydude7]

Docs here: https://vitejs.dev/config/server-options.html

[elvxk]

You can also directly run the following commands via CLI without having to change the configuration in vite.config.js

npm run dev -- --open --port 3000

Options
--open [path]	Open browser on startup ( boolean or string )
--port <port>	Specify port ( number )

and many more CLI options, you can see them here

---

In my case, I gave an alias in my bash alias nrd="npm run dev --" , so when I want to run my application with a specific port and open it directly in the browser, I run the command nrd --port 3000 --open

[JoshuaB94]

Awesome. Thank you for this and the resources. God Bless.

[gushogg-blake]

If you need to specify the browser or pass args you can set the environment variables BROWSER and BROWSER_ARGS, e.g.:

BROWSER=/usr/bin/brave-browser-stable BROWSER_ARGS=--force-renderer-accessibility\ --user-data-dir="..." vite dev --open

(from

vite/packages/vite/src/node/server/openBrowser.ts

Line 29 in 46d1352

const browser = typeof opt === 'string' ? opt : process.env.BROWSER || ''

)

[shakrov]

In package.json

"scripts": {
    "dev": "set \"BROWSER=C:\\Program Files\\Firefox Nightly\\firefox.exe\" && set \"BROWSER_ARGS=--new-window --kiosk\" && vite --open",

or

"scripts": {
    "dev": "set \"BROWSER=C:/Program Files/Firefox Nightly/firefox.exe\" && set \"BROWSER_ARGS=--new-window --kiosk\" && vite --open",

Works like a charm!
Thanks for the tip 💃