Show QR code when using the --host flag

[glocore]

Describe the problem

When exposing the server via the --host flag, the URL shown needs to be typed into your phone/tablet's browser.

Describe the proposed solution

It would be convenient if a QR code is displayed on the terminal that can be scanned by your phone! Especially for people who don't have a Mac-iPhone combo.

Alternatives considered

No response

Importance

nice to have

Additional Information

I'm willing to work on this feature.

[dummdidumm]

@benmccann correct me if I'm wrong but if this is implemented, I think this needs to be implemented in Vite.

[dciug]

An immediate alternative would be to open the URL in Chrome which shows you the QR code for that URL.
Or, you can search for "qr <url>" in DDG and it will generate what you need.
E.g: https://duckduckgo.com/?q=qr+http%3A%2F%2Fgoogle.com

[benmccann]

Actually this is implemented in Kit:

kit/packages/kit/src/cli.js

Line 223 in 5d47791

function welcome({ port, host, https, open }) {

Vite also prints a duplicate log message, but that will go away shortly with Vite 2.6.

I think the bigger question is whether we want to add this. I rarely load anything on my phone during development and just use Chrome's mobile phone emulator instead. Nor do I find it particular burdensome to type localhost:3000 on a phone

[Conduitry]

Well, it wouldn't be localhost:3000, it would be whatever the IP on your network is for your host machine, which is probably more of a pain to transcribe.

[dominikg]

can't you just copypaste the cli url into a random qrcode generator and then bookmark the scanned url on the phone? I'd rather not spam everyone's cli with a qrcode relevant to some.

Another way to implement this could be a third-party vite plugin that shows the qrcode on a virtual page and logs a link to that page during startup

[bluwy]

Made a POC for a Vite plugin that show the QR code in the terminal. Might turn it into an actual npm package but I haven't got the host resolve to match Vite's implementation:

import qr from 'qrcode-terminal'

const plugin = {
  name: 'qrcode',
  configureServer(server) {
    const host = server.config.server.host
    if (host === 'localhost') return
    if (server.httpServer?.listen) {
      const _listen = server.httpServer.listen
      const protocol = server.config.server.https ? 'https' : 'http'
      let timer
      server.httpServer.listen = function () {
        const port = arguments[0] || port || 3000
        const link = `${protocol}://${host}:${port}`
        clearTimeout(timer)
        timer = setTimeout(() => {
          qr.generate(link, { small: true }, (result) => {
            console.log('  Visit page on mobile:')
            console.log('  ' + result.replace(/\n/g, '\n  '))
          })
        }, 0)
        return _listen.apply(this, arguments)
      }
    }
  }
}

[benmccann]

Do you need to override listen? Or could you do it after the server was started and then call .address() to get the details?

[dominikg]

@bluwy and i chatted about it today and have a plugin out soonish.

[rmunn]

I wouldn't want --host to show a QR code by default, but I wouldn't object at all to a --qr option to show a QR code.

[bluwy]

@dominikg and I have published https://www.npmjs.com/package/vite-plugin-qrcode. Add it to config.kit.vite.plugins as [qrcode()] and a QR code will be shown when you set --host. Closing in favor of a userland solution.