DEV Community

Serena
Serena

Posted on

View your localhost web applications on your mobile device (Laravel/React) for Windows users (2023)

🧐 Believe it or not, I've recently discovered that you can test your web apps using your mobile device.
This can help when you want to test for responsiveness because Developer Tools is not always accurate.

I think this may work with any framework but I've only tested this with Laravel and React. Comment down below if it worked for any other frameworks!

I'll assume you already set up your environment and your project can be ran, so let's dive straight in. There are really only 4 steps.


First let's mess with our network settings:

  1. Click on the wifi icon near the bottom right of your screen
  2. Underneath your wifi name, click on properties
  3. Ensure your Network Profile is set to Private

For the second step, all you need to do is connect your mobile device to the same wifi as your PC

I'm not sure exactly why it's important to set it to Private, but if you know then I'd like to know why this works when the network is set to so.

Third, let's find the ip address of our PC:

This is important so that you can actually connect to the localhost and share it with your PC.
💻

  1. Press Win+R and type cmd
  2. Press Ok
  3. While command prompt is open, type ipconfig and keep note of your IPV4 Address. (There may be multiple IPV4's for you so keep note of all of them if one doesn't work)

*Last Step: *

🔗 Laravel users:

  1. In your terminal, run your app with php artisan serve --host 0.0.0.0
  2. On your mobile device, enter your IPV4 address into your browser url along with your port # as the following (http://122.169.22.22:8000).

🔗 React users:

  1. In your terminal, run your app with npm start --host 0.0.0.0
  2. On your mobile device, enter your IPV4 address into your browser url along with your port # as the following (http://122.169.22.22:8000).

So if your app is on port 3000, then replace 8000 with 3000 instead._


There you have it! So whenever you make changes to your application it should refresh in real time! (With laravel I've had troubles and have had to refresh it myself).

Let me know down below if this worked for any other frameworks and if it works for Mac if you own one. This is better for those who don't want to pay to test on different devices. A bonus if you own multiple devices!

Top comments (1)

Collapse
 
98sky profile image
98SKY

I failed to open camera from js side in webview can any one share your experience on it , how I can access
*android native using java *