How to view your website under development from laptop to mobile screen?

Greetings! A couple of times when I create front-end of websites, then I really feel the need of testing the look of UI on a mobile phone screen to check the responsiveness and to feel the live design. Although, Firefox and other browsers support Responsive Design Mode (Ctrl+Shift+M), but In this post I’m gonna tell you the best option (without using any external third party android or ios applications). Let’s get started.

1. Prerequisite

Generally, we use to have all these things, but still, I am mentioning below for the sake of listing:

  1. *nix based machine (e.i Linux, iOS, etc).
  2. You should have a website locally on your machine. It can be as simple as a basic index.html file.
  3. You must have Python3 installed on your machine.
  4. You need package ifconfig or similar to know your local IP (e.i inet, something like: 192.168.42.157).

2. Connect your laptop and mobile phone to the same hotspot

Sharing can take place only if your laptop (that has under development website) and your mobile phone (on which you indent to see the live view of your website) are both connected in the same network.

3. Note your local IP (inet address) from laptop

I am using Ubuntu20.04 and I used ifconfig package to see my inet as follows:

ifconfig -a
...
wlp2s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.42.157  netmask 255.255.255.0  broadcast 192.168.42.255
        inet6 fe80::5679:ee0f:3f9f:7f50  prefixlen 64  scopeid 0x20<link>
...

4. Change to website directory

Change directory to your project.

cd my_website

5. Run python HTTP server

From project directory (that contains your index.html), run python http server as follows:

python3 -m http.server 8000

Note: You may change this Port No. 8000 as per your need. Read more about python server here.

6. Open your mobile browser

You may use any browser of your choice. But I have tested this method on only Chrome and Firefox.

7. Access your python server from mobile browser

In the address bar enter your local server address in the following syntax:

<inet>:<port>

So, if your inet is 192.168.42.157 and port is 8000, then go to address:

192.168.42.157:8000

8. Conclusion

If everything goes fine, you should be able to see your website live (subjected that your index.html were present in the same location).

If there is no index.html in the directory you ran python server from, then you should be able to navigate back and forth directories from the mobile browser itself.

9. Bonus

Using this method you may also, transfer files from your laptop to your mobile with as enough as 2MBps speed. Just click on a file and download it.

Hope this post has helped you somewhere.
Thanks for reading!
See you in the next post 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s