Display QR for local network addresses

[Haberkamp]

Summary

Display a QR code for local network addresses, to make it easier for
developers to access their local build via a phone or tablet.

Background & Motivation

Sometimes you want to test your application on a mobile device, like phone or a tablet.
You already can do this by passing the --host flag to the dev script.

But typing http://169.192.0.103 into your phone is not super easy to do. An easier
solution is to additionally display a QR code. The user can scan the code to access
the local development build.

Expo for React Native is already doing this.

You can also achieve the same result with vite-plugin-qrcode. The issue
here is that the plugin generates two QR codes because Astro returns two IP addresses.
From a UX/DX perspective it makes more sense to design it in a way where the text version
of the IP addresses and the QR code fit into one screen and the user does not need to scroll.

Goals

A concise, bulleted-list outlining the intended goals of this RFC.

• Make it easier for developers to access their build via a mobile device

Example

Start the development server, with the --host flag, to show a QR code:

npm run dev --host

[ematipico]

What's preventing users from using this plugin?

[delucis]

I guess they mention that here:

The issue here is that the plugin generates two QR codes because Astro returns two IP addresses.

Also the argument here is presumably for the convenience of having this working automatically. Installing the plugin yourself for each project I guess is almost more work than typing the URL manually.