Provides quick reference for configuring automatic localhost opening across modern development frameworks and build tools.
Quick reference for configuring automatic localhost opening across frameworks.
Modern development servers can automatically open applications in the default browser when they start.
Benefits:
File: vite.config.ts
server.open: true for default browserserver.open: '/path' for specific routeserver.port for custom portopen: mode === 'development'Method 1 (CLI): Add --open flag to dev script in package.json
Method 2 (Custom Server): Use open package after server starts
Environment Control: Use BROWSER=none to disable
BROWSER=true in .env.localBROWSER=chrome for specific browserBROWSER=none to disableFile: vue.config.js
devServer.open: truedevServer.open: 'chrome' for specific browserFile: angular.json
serve.options.open: true--open flag to dev scriptopen package after serverFile: svelte.config.js
kit.devServer.open: trueFile: astro.config.mjs
server.open: trueFile: nuxt.config.ts
devServer.open: trueFile: webpack.config.js
devServer.open: trueThis skill includes a cross-platform Python script for opening browsers automatically.
Location: scripts/open_browser.py
Usage:
python scripts/open_browser.py # Opens http://localhost:3000
python scripts/open_browser.py 5173 # Opens http://localhost:5173
python scripts/open_browser.py 8080 /admin # Opens http://localhost:8080/admin
Features:
BROWSER=none and CI=true environment variablesIntegration Examples:
{
"scripts": {
"dev": "vite & python .claude/skills/dev-server-autoopen/scripts/open_browser.py 5173",
"dev:next": "next dev & python .claude/skills/dev-server-autoopen/scripts/open_browser.py 3000",
"dev:custom": "node server.js & python .claude/skills/dev-server-autoopen/scripts/open_browser.py 8080 /dashboard"
}
}
Concurrent Mode (recommended for better reliability):
{
"scripts": {
"dev": "concurrently \"vite\" \"python .claude/skills/dev-server-autoopen/scripts/open_browser.py 5173\"",
"dev:next": "concurrently \"next dev\" \"python .claude/skills/dev-server-autoopen/scripts/open_browser.py 3000\""
}
}
Direct Shell Usage:
# Windows
start /B npm run dev & python .claude/skills/dev-server-autoopen/scripts/open_browser.py 3000
# macOS/Linux
npm run dev & python .claude/skills/dev-server-autoopen/scripts/open_browser.py 3000
Disable Opening:
BROWSER=none npm run dev
CI=true npm run dev
Install: npm install -D open
Usage: Import and call after server starts
Cross-platform support for all browsers
Create npm script that starts server and opens browser
Use OS-specific commands (Windows: start, macOS: open, Linux: xdg-open)
BROWSER=none.env.local for per-developer settingsAlways disable auto-open in CI/CD pipelines
Check for CI environment variable
'chrome' or 'google chrome''firefox''safari''msedge'Use true to open system default browser
BROWSER=none or CI=true.env.example.env.localstart command for shell scriptsopen command for shell scripts/Applications/xdg-open for system defaultgoogle-chrome, firefox| Framework | Config File | Setting |
|---|---|---|
| Vite | vite.config.ts | server.open: true |
| Next.js | package.json | "dev": "next dev --open" |
| CRA | .env.local | BROWSER=true |
| Vue | vue.config.js | devServer.open: true |
| Angular | angular.json | serve.options.open: true |
| Remix | package.json | "dev": "remix dev --open" |
| SvelteKit | svelte.config.js | kit.devServer.open: true |
| Astro | astro.config.mjs | server.open: true |
| Nuxt | nuxt.config.ts | devServer.open: true |
| Webpack | webpack.config.js | devServer.open: true |