loading...

Live preview of react-app on mobile

318097 profile image Mehul Lakhanpal Originally published at Medium ・1 min read

Apps can be tested on browsers using the responsive view. The preview of the app can be observed from any width to any height. But to test it out on a real mobile, the app has to be deployed somewhere.

Note: This method would also work for apps created using other ways. I have used react hence the title.


The application running on your development machine can be tested out instantly on a mobile device.

  1. Both the computer and mobile device must be connected to the same wifi network.

  2. Get the local IP address of the computer. My local IP address, in this case, is 192.168.29.217
    Local IP address on Ubuntu
    I am using ifconfig to get the IP address on ubuntu.

    Search for Find local ip address for your specific os.

  3. Get the port on which the react-app is running. ex., My app is running on localhost:3000

  4. Go to the browser in the mobile device and enter : For me, it would be 192.168.29.217:3000

Done!


Thanks for reading 💙

Follow @codedrops.tech for daily posts.

InstagramTwitterFacebook

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript

codedrops.tech

Discussion

pic
Editor guide
Collapse
kretaceous profile image
Abhijit Hota

Whoa! I just checked it and it works like a charm. HMR is also working!

Thanks dude! Why didn't I know about this earlier?!

Note: If you're on Windows, you should do ipconfig in command prompt and note the IPv4 Address under the Wireless LAN adapter Wi-Fi section.

Collapse
318097 profile image
Mehul Lakhanpal Author

Awesome 🔥🎉