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:
- *nix based machine (e.i Linux, iOS, etc).
- You should have a website locally on your machine. It can be as simple as a basic index.html file.
- You must have Python3 installed on your machine.
- 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 🙂
A Habit of Learning 