Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show QR code when using the --host flag #2513

Closed
glocore opened this issue Sep 28, 2021 · 10 comments
Closed

Show QR code when using the --host flag #2513

glocore opened this issue Sep 28, 2021 · 10 comments

Comments

@glocore
Copy link

glocore commented Sep 28, 2021

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
Copy link
Member

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

@dciug
Copy link

dciug commented Sep 28, 2021

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
Copy link
Member

benmccann commented Sep 28, 2021

Actually this is implemented in Kit:

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
Copy link
Member

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
Copy link
Member

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
Copy link
Member

bluwy commented Sep 29, 2021

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
Copy link
Member

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
Copy link
Member

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

@rmunn
Copy link
Contributor

rmunn commented Sep 30, 2021

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
Copy link
Member

bluwy commented Oct 1, 2021

@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.

@bluwy bluwy closed this as completed Oct 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants