Nuxt.js: Auto open browser when run dev

[thangman22]

Nuxt should auto browser when start dev command

_{This question is available on Nuxt.js community (#c1275)}

[yezongyang]

It should be optional config

[Atinux]

Hi @thangman22

I don't like this behavior since it's too intrusive, the url is displayed into the terminal and it's good enough :)

[sosout]

@thangman22 Hi, I opened the browser through express and OPN plug-ins.
package.json:

server.js:

const opn = require('opn');
const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
const port = process.env.PORT || 8888;

// 传入配置初始化 Nuxt.js 实例(config and init)
const config = require('../nuxt.config.js');

const nuxt = new Nuxt(config);
app.use(nuxt.render);

// 在开发模式下进行编译(Compile in the development mode)
if (config.dev) {
  new Builder(nuxt).build()
  .catch((error) => {
    console.log(error);
    process.exit(1);
  })
}

// 监听指定端口(Listen on port)
app.listen(port, 'localhost', function () {
  console.log('成功开启'+ port +'端口');
  var url = 'http://localhost:' + port;
  console.log('> 服务器运行于 ' + url + '\n');
  opn(url);
})

This is a proposal I recommend！

[Atinux]

You can add this feature in the nuxt.config.js using hooks and the opn module:

const opn = require('opn')

module.exports = {
  hooks: {
    listen(server, { host, port }) {
      opn(`http://${host}:${port}`)
    }
  }
}

[cmty[bot]]

This question has been resolved by @Atinux, see answer.

[sosout]

@Atinux Thank you. But it's not perfect enough. when nuxt.config.js has not been modified, if you pressed Ctrl + s, it will trigger. And each time is triggered once a time.

[heavenlian]

server.js
if (config.dev){
config.build.plugin = [ new OpenBrowserPlugin({http://${host}:${port}})]
}
still the same problem

ctrl + s it will trigger .

another problem : when I start the server ,it open the browser twice.

my question is how to make the server.js don't be watched.

another is : solve it trigger twice.

[heavenlian]

@thangman22 I have solve this problem .
package.json
"scripts":{
"dev" : "backpack dev"
}
"devDependencies":{
backpacke-core:"^0.7.0"
}
backpack.config.js:
const OpenBrowserPlugin = require('open-browser-webpack-plugin')
module.exports = {
webpack:(config, options, webpack) => {
config.entry.main = './server/index.js'
const openBrowser = new OpenBrowserPlugin({
url: http://localhsot:3000 ,
delay: 20*1000
})
config.plugins.push(openBrowser)
return config
}
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.