Previewing Local Domains from Remote Devices with ngrok Permalink: Previewing Local Domains from Remote Devices with ngrok Bookmark Icon

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:80

You 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!


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!

Comments