Quickly view local website from your phone

As a frontend dev, you use a local webserver to develop a website (indicated with localhost:$PORT or 127.0.0.1:$PORT in the url).

Sometimes I want to check my website on mobile device (for mobile browser performance testing and so on), so I check it on my phone. But to do that I need to these:

1. Get the IP address of my computer -- (using ip -br a on Linux or ifconfig on Mac)
2. Open up my phone -- (it's slow 😢)
3. Connect it to the same WiFi connection, if not already
4. Then my browser -- (this one too)
5. Type in the IP address and the port -- (nobody like typing IP addresses)

These list of actions might not seem like much, but when you have do it a bunch of time often it become repetitive and exhausting.

And then...

Suddenly I remember that you can generate QR codes in a terminal so after a quick google search I found that you can use qrencode to generate QR code from a string.

First, I install it with Homebrew (on Mac, use your OS's package manager otherwise).

$ brew install qrencode

Then, I encode my local IP address and port using qrencode.

# assuming your webserver port is 3000
$ qrencode -t ansiutf8 http://192.168.x.x:3000

The -t ansiutf8 will make qrencode print out the generated output to the terminal, otherwise your will need to pass in the -o <filename> to output them to a file.

But if you notice there, you still need to type out your local IP address to the command line, you can solve it easily by using ifconfig.

$ qrencode -t ansiutf8 http://$(ipconfig getifaddr en0):3000

Lastly, to make it even better, I added an alias to my shell configuration (.zshrc if you're using zsh, .bashrc for bash). I use mobile (for lack of a better terms).

# at the bottom of the file, or anywhere if you know what you're doing :)
alias mobile="qrencode -t ansiutf8 http://$(ipconfig getifaddr en0):3000"

Now, you can just type in your alias, whip out the camera in your phone and point it to the command line output. Your phone will smart enough to know that the QR is a url and will open the browser automatically. 🎉🎉🎉

To extend this, since now the port is hardcoded in the alias, you can also create a script that will receive the port from the command line. Even better, you can also create a QR code that will connect your phone to your current WiFi, you can refer to this article. But for my use case, this simple alias is enough.

Thanks for reading!