4 years ago
3 mins readHello beautiful developers, how are you doing today?
I bring to you in this article a hack to view your web project in real-time on your mobile device as you code.
You might want to check out the developer typing game I built ๐ฅฐ
Before you continue with this article, kindly ensure you have the following setup on your device.
For Static Web Project (HTML, CSS, JavaScript)
For Frameworks Projects (React.js)
In this tutorial, I will be using the Static Web Project as an example, but trust me, it's the same method for previewing your framework project on your mobile devices.
Let's get started ๐คฉ
Ensure your project is running on your browser with the Live Server extension that we installed earlier, you can start your installed live server by clicking on the Go Live button at the bottom of your VScode ๐.
A live server will save you the stress of hitting the
refresh button
on your browser each time you make changes to your project files.
Keep note of the port which your server is currently running on from the browser address bar, mine is currently running on port 5501 ๐
IPv4 address is a 32-bit number that uniquely identifies a network interface on a machine, it is used for communication between devices.
Let's find it!!!
1. Open your cmd
2. Run ipconfig/all
3. Find theIPv4 Address
from the list
Ensure your mobile phone is connected to the same network as your computer, I will be using my android as Hotspot for my computer through the wifi.
Here is the fun part, follow the steps below ๐
1. Open your mobile browser and paste your IPv4 Address on the address bar ๐
2. Append the live server port to the IPv4 Address ๐
:5501
use your own server port
index.html
file, then adding the /index
is optionalAppend your framework server port to the IPv4 as demonstrated in this article to preview on your mobile phone.
Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned from this article, I will like to connect with you.
Let's connect on
My friend and I are holding a meetup every Saturday to discuss JavaScript and other programming tips and to support ourselves.
You can be a part ๐ of the community by joining our WhatsApp group
See you in the next article. Bye Bye ๐โโ๏ธ
If you found this helpful and want to support my blog, you can also buy me a coffee below.