While developing a portfolio website for a client I came across a bug in the UI which was somehow only showing in my mobile devices, not on localhost developer tools.
I had two choices
- Build and host it to sites like Netlify/Github pages (But it was such a hassle).
- Somehow find a way to run my localhost to my mobile devices.
After some research and spending enough time on Google. I came across ngrok , it is used to create secure introspectable tunnels to localhost in the easy language it creates a way to use your localhost server as an actual website.
Now let's set up our ngrok.
Signup to the ngrok then,
Go to the website:- https://ngrok.com/download
Download the version you want to.
Extract it.
In window simply extracts it using any extractor like 7zip or WinRAR.
On Linux or OSX you can unzip ngrok from a terminal with the following command.
unzip /path/to/ngrok.zip
In the window, you will be getting an executable file double click to run it.
Now to go to the ngrok Dashboard and copy the auth token.
Now run the following code in the terminal. for Linux
./ngrok authtoken <Your auth token here>
for window
ngrok authtoken <Your auth token here>
Ngrok startup terminal
After successfully creating the configure file with the above step all you need to do is
ngrok http <YOUR PORT HERE>
example :
ngrok http 3000
You will get the following screen just copy the forwarding link and past it to your mobile browser to access localhost.
Ngrok forwarding localhost:3000
That's all enjoy the development process without much hassle.
The next topic will be How to debug a localhost website from mobile.