Backstory

ngrok allows you to let others access your local site. Quite helpful for quick demos and immediate feedback before deployments.

I needed to test the work done by my colleague before merging the PR a few days back. Lazy me didn't want to pull the code and run it locally. I had heard about ngrok but had never used it. It was time to give it a try.

Problem

Its documentation is quite detailed and got us started in 5 minutes. But, the site couldn't be accessed using the provided URL. After some digging, we found out it was because we were using a virtual host in nginx to access the local site.

That means the local site can be opened using something like http://my-awesome-site.local or http://that-brilliant-idea.dev instead of the generic one http://localhost

Solution

Just like a typical developer, I didn't read much of the official documentation. And tried searching for a solution all over the internet. That cost me 40 odd minutes.

There is a section in the docs for rewriting the host header and there is one for virtual hosts too. The change is simple. Instead of:

ngrok http 80

Your command should be something like:

ngrok http --host-header=my-awesome-site.local 80

And it just works. That's it. I hope it helps you.