How to Run Localhost While not Sharing the Same Network.

How to Run Localhost While not Sharing the Same Network.

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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

  1. Build and host it to sites like Netlify/Github pages (But it was such a hassle).
  2. 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,

  1. Go to the website:- https://ngrok.com/download

  2. Download the version you want to.

  3. Extract it.

  4. In window simply extracts it using any extractor like 7zip or WinRAR.

  5. On Linux or OSX you can unzip ngrok from a terminal with the following command.

    unzip /path/to/ngrok.zip

  6. In the window, you will be getting an executable file double click to run it.

  7. Now to go to the ngrok Dashboard and copy the auth token.

  8. 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 terminalNgrok startup terminal

  1. 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

  2. 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 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.

 
Share this
Proudly part of