Running a Local React Project on Mobile and Web

Lately, I’ve been working on my React.js-based portfolio, and I’ve incorporated a simple Three.js model that’s animated. I thought it would give it a nice little flair to stand out just a bit!

The Problem:

With the incorporation of the 3D model, I wanted to make sure that everything was working as expected for the model, the website, and for mobile. Usually, for mobile, I just shrink my window size and test. Unfortunately, after I deployed my site, I noticed that my model rendered on any screen size in web view, but my mobile Chrome window didn’t render anything.

The Solution:

This is specifically for iOS devices since that’s what I use to develop. I imagine it’s similar for other devices.

• Spin up your local environment

npm run dev

• Connect your phone to your laptop with a cable
• On your laptop, find your ip address.
  - For Mac users, follow the flow below
  - Systems Settings → Wi-fi → (on the wifi you’re connected to) → Details. You’ll see ‘IP address’
• Now on your phone, open up Safari and type in ‘http://[ip address]:[port]’
  - For example, I’m using 3000 as my port so it would look like ‘http://123.456.78.90:3000’
• Back on your laptop, open Safari.
• Go to the Develop tab. It’s up there with ‘File’ and ‘Edit’.
• You should see the name of you phone and the website you’re currently on.
• Once you’ve made your selection, the inspector tool will open up for you mobile device.

Now you can make changes to the DOM of the window of your phone and on the web. I love this method because you can see your changes being reflected as you would on the web but on mobile as well. This helped me debug the issue where my model wasn’t rendering. Turns out I needed to define a height for one of my elements. Classic.

Hope this helps! Don’t forget to test on an actual mobile device — happy coding!