Tunnel a localhost subdirectory through ngrok?

Question

Objective: want to share a website preview using ngrok, which creates a tunnel from which my localhost can be seen with an url of something like mywebsite.ngrok.io

Problem: I use WAMP and my localhost folder looks something like this:

localhostdirectory
   |-- website1
   |-- website2
   |-- etc

To access a website I type to localhost/website1/ in the browser, I would like to tunnel only that URL, the possible solutions would be:

1. Setting up a Virtual host, I would go through the hassle of manually setting up a virtual host, then I get something like website1.dev, and then I would pass it to ngrok as the host header in the HTTP request, like that:

   ngrok http -host-header=website1.dev 80
   

   I didn't understand what the host header is though, and why can't I pass a relative url like localhost/website1/, also what is the rewrite option?

2. Change the folder directory of my localhost to the folder of the website, I would prefer not to do that.

Is there a better way to accomplish my objective in an easier way, maybe going through WAMP aliases?

Gadget

Virtual hosts are not that frightening see this for how to setup. Once you have done the first one it should be a 2 minute job to do the next. #23665564 – Kerwinn

Yes you just have to add some text in the httpd-vhosts.conf file and then in the hosts file, but that's still a pain in the ass. – Gadget

Answer 1

If you make do with Apache Vhost you just have to exec command

ngrok http -host-header=rewrite YOUR-LOCAL-DOMAIN:PORT

Dont forgot to edit host file for resolution @IP <-> YOUR-LOCAL-DOMAIN

Mcabee

This worked for me with a subdomain. Ex: sub.local.dev Thanks! – Eyelid

If this does not work for you, try: ngrok http -host-header=SUBDOMAIN.localhost PORT – Loopy

Work for me : ngrok http --host-header=rewrite YOUR-LOCAL-DOMAIN:PORT – Railway

Answer 2

I tried below way.

When I ran $ ./ngrok http 80 ngrok listen to localhost:80 which shows dashboard because apache server is running on port 80. Then I tried running subfolder in another port, which solved problem. Assume you have project in xyz and want ngrok should points it. Then do following

$ cd /opt/lampp/htdocs/xyz
$ php -S localhost:8080

Here 8080 is any unused port. localhost:8080 direct points to xyz and then open other terminal

$ ./ngrok http 8080

By doing this ngrok will listen to 8080 port were your xyz is running.

Hope this helps!!

Hellman

I have tried this on Wordpress, I can open a page at xxxxx.ngrok.io with browser but on mobile it shows only text without images and styles – Bignonia

Underrated answer – Langmuir

If you don't see images and CSS styles, you might have https errors in the console, try using the http link instead. – Irradiate

Saved me writing a SO question. I was trying to get ngrok to point to a subdirectory on my localhost and tried all kinds of things with the -host-header option to ultimately have php -S localhost:8080 (in the subdirectory) save the day so i could then do ngrok http 8080 👍 – Rutty

Answer 3

I believe the correct syntax now for ngrok v3 is ngrok http --host-header=rewrite YOUR-LOCAL-DOMAIN:PORT

Notice the double --

https://ngrok.com/docs/guides/upgrade-v2-v3

Waxwork

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Outofdoor

Answer 4

After you set up the ngrok address to point to localhost on port 80, you can access your websites by their names. Ex:

ngrok http -subdomain=dev 80

Access website1:

dev.ngrok.io/website1

Smoothbore

This only works in combination with a paid subscription for ngrok. – Honorarium