How to run localhost on Mobile Devices?

Do you want to access your Localhost on Mobile devices across different platforms and screen size. Here is step by step guide.

So you are a developer or designer and are facing issues for testing designs in real time on various devices. You want to know how your website looks like when it is landed on various platforms. Basically you want to run localhost on mobile.

 

Solution to above is to host the website on a server and test the changes again and again. Isn't it time consuming to upload changes again and again.

 

So what if we test the changes from localhost on mobile devices and other platform?

 

Let's do it!!

 

I am going to show you how to do it for windows platform. Though the process is same using the command line for different platforms.

 

Download a utility called ngrok.

 

It is a free utility to expose your local ports publicly and assign a global domain for your localhost. Let's learn how to run it.

1. Once downloaded you will get a zip file.
2. Extract the zip file you have just downloaded.
3. Go to C drive and create a folder called ngrok
4. Copy the file('ngrok.exe') into that folder.
   
   
   
   
5. Run the command window and go to this folder using command line.
6. You can also open command window directly here with a little trick(Press Shift Key + Right Click => Open Command Window Here)
7. Now in command window type the following command
   
   ngrok http [port] -host-header="localhost:[port]"
   
   Replace the [port] with the port your localhost is running. For example like on my system I run it like
   
   ngrok http 63927 -host-header="localhost:63927"
8. After running the above command you will see the following outputngrok output
   
   
   
   
9. Notice the URL's generated by ngrok. These URL's can be used to run your localhost on global platform.
10. Type this URL in the desktop browser or any mobile browser, you will see that you are able to access your application globally.

If you still face an issue please refer the below demo video or comment below.

The cool thing if you are developer and need to do testing based on device platform you can still put breakpoints in your development environment.

 

Note -

 

If you are using any application in which you need to use your domain(Like in Facebook app if platform is web), you need to update the URL over there also.