Live Preview Of React-app On Mobile - DEV Community ‍ ‍

Add reaction Like Unicorn Exploding Head Raised Hands Fire Jump to Comments Save Boost More... Copy link Copy link Copied to Clipboard Share to X Share to LinkedIn Share to Facebook Share to Mastodon Share Post via... Report Abuse

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 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. Instagram ● Twitter ● Facebook

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript codedrops.tech

Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Submit Preview Dismiss Collapse Expand Abhijit Hota Abhijit Hota Abhijit Hota Follow I love almost everything about computers, specifically software. Diving deep into Web development and cloud and loving it! 💛👨‍💻

• Location India
• Education Indian Institute of Technology, Madras
• Joined Jan 11, 2020

• Sep 20 '20 • Edited on Sep 20 • Edited Dropdown menu

• Copy link
• Hide

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 Expand Mehul Lakhanpal Mehul Lakhanpal Mehul Lakhanpal Follow Full-stack Developer | Building Code404.co & Grid | Prev. built QuickSwitch, Array Builder, FileOps

• Email [email protected]
• Location Bangalore
• Work Full stack developer
• Joined Apr 20, 2019

• Sep 20 '20 Dropdown menu

• Copy link
• Hide

Awesome 🔥🎉

Collapse Expand rehan khan rehan khan rehan khan Follow

• Joined Jan 29, 2023

• Jan 29 '23 Dropdown menu

• Copy link
• Hide

not working

Code of Conduct • Report abuse

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

Hide child comments as well

Confirm

For further actions, you may consider blocking this person and/or reporting abuse

Mehul Lakhanpal Follow Full-stack Developer | Building Code404.co & Grid | Prev. built QuickSwitch, Array Builder, FileOps

• Location Bangalore
• Work Full stack developer
• Joined Apr 20, 2019

MetaTags.io — Preview & Optimize Your Link Sharing #webdev #frontend #seo 🌍 JSWORLD Conference 2026 — JavaScript’s Global Gathering #javascript #techtalks #webdev 💼 AmbitionBox — Company Reviews & Salary Insights #career #learning #interview #webdev

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account