Hello 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 Frameworks Projects (React.js)
- A working computer with wifi connection
- Ensure your server is running (yarn/npm start 😉)
- A browser
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 🤩
1. Run the Live Server
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 buttonon your browser each time you make changes to your project files.
Live Server in action
2. Identify Project Server Port
Keep note of the port which your server is currently running on from the browser address bar, mine is currently running on port 5501 👇
3. Find your IPv4 Address
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
3. Find the
IPv4 Address from the list
4. Connect your Computer to your Mobile device
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.
5. Preview your web project on your mobile browser
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 👇
:5501use your own server port
- if you have an
index.htmlfile, then adding the
Append 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
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.