Previewing Local Domains from Remote Devices with ngrok
published on
For long, it has been sufficient for me to preview my work with DevTools/emulators on my development machine, doing the real testing once a staging server had been set up. This could be at the beginning of a project or some time later, when the project has progressed. For one of my last projects I needed to test and preview earlier and more often. I needed a way to preview my .local project domain on my phone. The question was: How do you do that in 2021?
In the past, I used Adobe Edge Inspect, which has been discontinued, and later Ghostlab. Since I don’t use it much, I didn’t want to buy another license.
By asking Twitter, I got the answer: These days, everybody seems to use ngrok.
In a nutshell:
ngrok exposes local servers behind NATs and firewalls to the public internet over a secure tunnel
There is a free plan, which is nice, and for my needs sufficient. Installation is well explained and straight-forward and once completed, leads straight into tutorials to get started. On the free plan, ngrok’s temporary URLs are randomly generated, but again, in my case not a problem. I can see how permanent URLs for previews can be nice and worth a paid subscription.
Once installed, running ./ngrok http 80 in your Terminal window, creates a tunnel for your local webserver at port 80 and as a result, displays in the following:
Session Status online
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://7b2488459f98.ngrok.io -> http://localhost:80
Forwarding https://7b2488459f98.ngrok.io -> http://localhost:80You can then copy either one of the temporary forwarding URLs, open it in your browser and voilà: You can browse your local development domain from your remote device.
If your local project runs on https, you will need a different command for ngrok, which looks like this:
./ngrok http -host-header=rewrite https://foobartel.local:8890
Session Status online
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://8c004e80cb77.ngrok.io -> https://foobartel.local:8890
Forwarding https://8c004e80cb77.ngrok.io -> https://foobartel.local:8890 To quit the process, press Cmd-C.
I am happy with this solution and since I don’t use it too often, the setup works well and gives me all I need to preview local domains for mobile testing. If you are looking for a solution that lets you preview domains remotely every once in a while, this should work for you, too. In cases where you’d use it to preview a lot of domains and often, being able to get permanent URLs to bookmark would be a benefit and worth a paid plan. Thanks to Harry and Avinash for the pointer! Happy previewing!