CODEWITHSUNDEEP
reactjsmobileadaptive-design
foerever
foerever

Reputation: 335

How to test React adaptive design for mobile on desktop? (Windows)

I've been building a website with React and Node recently. I'm currently working on the mobile site. I've been running everything locally and currently test the mobile version with either an emulator (Ripple Beta) on the chrome store or by deploying it via Surge. However, running it on my phone via surge is ultimately different from running it on desktop.

Now before you suggest what may be causing differences I wanted to note also that I am currently implementing the following (based on what I saw in other similar threads):

<meta name="viewport" content="width=device-width, initial-scale=1">

react-responsive package

I want to keep my website single url instead of using an m(dot).link and I also want to use an adaptive design rather than responsive (I'm aware responsive is usually better).

One example of where an emulator will not suffice for testing is for testing compatibility with very specific syntax. For example, iphone does not understand certain es6 syntax such as "new Date()" for certain date formats whereas android does.

Is there a way to test an adaptive design for mobile on desktop such that I can run it locally on my computer instead of having to deploy on surge each time (so that I can open it on my phone).

This will make debugging these kind of problems much easier! I've seen a lot of similar threads for responsive designs but I think adaptive designs (completely different design from my actual desktop website design) can have sort of unique issues as seen above. It would be great, however, if I could still utilize the core functionality/components of the desktop version.

Upvotes: 0

Views: 1388

Answers (2)

William
William

Reputation: 749

If your phone and laptop are on the same wifi, you can access your locally hosted web app on your phone.

STEPS

  • Run your react web app as usual, it'll be available on http://localhost:3000
  • Go to the terminal and type ifconfig | grep inet. This checks your laptop`s local network IP e.g. 192.168.0.10
  • On your phone, open your browser and the url http://192.168.0.10:300

NOTE: We replaced the localhost with the IP 192.168.0.10

Upvotes: 0

Richard Zheng
Richard Zheng

Reputation: 179

I worked on a school project that required us to test our web app using a real phone. What we did was we host a firebase server.

  • Start by installing the firebase cli:
npm install -g firebase-tools
  • Type firebase init in your console. (https://firebase.google.com/docs/hosting/deploying for reference)
  • Push your code onto your hosting with firebase deploy, then you can go to your url on your phone and it should work pretty well. Firebase deploy would be like a git push, it takes seconds to complete, so it's pretty quick.

Edit: Sorry didn't realize Surge did the same thing. However, I do not think you can test on your computer easily. Though you can download Xcode if you have a Mac and use the iPhone emulator, and Android Studio for the Android emulator. But both take pretty long to start up, personality, I would just deploy to surge or firebase and test on a real phone if you have one.

Upvotes: 1

Related Questions