Back to Blog
5 Steps to Live-Preview your Web Project on Mobile Devices

5 Steps to Live-Preview your Web Project on Mobile Devices

See your mobile view as you code.

4 years ago

3 mins read

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 🥰

Prerequisite

Before you continue with this article, kindly ensure you have the following setup on your device.

For Static Web Project (HTML, CSS, JavaScript)

  1. A working computer with wifi connection
  2. VS code
  3. VS code Live Server
  4. A browser

For Frameworks Projects (React.js)

  1. A working computer with wifi connection
  2. Ensure your server is running (yarn/npm start 😉)
  3. 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 👇.

image.png

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.

Live Server in action

ezgif.com-gif-maker (1).gif

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 👇

image.png

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!!!

200.gif

1. Open your cmd

image.png

2. Run ipconfig/all

image.png

3. Find theIPv4 Address from the list image.png

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.

image.png

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 👇

image.png

2. Append the live server port to the IPv4 Address 👇

:5501 use your own server port

image.png

  • if you have an index.html file, then adding the /index is optional

image.png

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

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 🙋‍♂️

image.png

If you found this helpful and want to support my blog, you can also buy me a coffee below.