26

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?

Pontiacks
  • 1,118
  • 2
  • 13
  • 23
  • 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. http://stackoverflow.com/questions/23665064/project-links-do-not-work-on-wamp-server/23990618#23990618 – RiggsFolly May 04 '15 at 11:45
  • 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. – Pontiacks May 05 '15 at 15:04

4 Answers4

41

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

Abdourahmane FALL
  • 1,836
  • 13
  • 7
16

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

Rohan Khude
  • 4,455
  • 5
  • 49
  • 47
  • 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 – Ivan Topić Dec 18 '18 at 10:31
  • 4
    Underrated answer – Logan Jan 25 '19 at 00:39
  • If you don't see images and CSS styles, you might have https errors in the console, try using the http link instead. – Stanley Umeanozie Oct 25 '20 at 10:43
  • 2
    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` – hot_barbara Nov 24 '20 at 05:09
3

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
semaca
  • 31
  • 3
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

The Brogrammer
  • 41
  • 5
  • 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](/help/how-to-answer). – Community Apr 22 '22 at 00:11