How to View Your React App on a Mobile Device

Alex Richards
Dec 3, 2019 · 4 min read

If you have ever worked on a React project, one important thing that you will more than likely have to tackle at some point is the display of your website for mobile users. You can, of course, accomplish this through the use of media queries and the in-browser display, but what if you want to see your project on your own device to see how it really looks? Today, we will talk about how to do just that.

Image for post
Image for post

What About The Device Toolbar?

Before we dive into how you can view your React app on your mobile device, we should first talk about Google Chrome and the device toolbar option that they provide. If you right-click on your App (or any website) and click Inspect (Ctrl + Shift + I), you will be prompted with a screen that looks somewhat like this:

Image for post
Image for post

In the section with all of the code, you will see an icon on the top left that looks like two boxes. This is the device toggle toolbar option.

Toggle Device Toolbar Option

Once you click this, you will be brought to a screen that allows you to change the display size within the browser which also has a list of preset common devices and their sizes. So now you might be wondering why you wouldn’t just use this over your actual mobile device? Well, the reason for that is because I have found the device toolbar to be somewhat buggy and unreliable. Sometimes, this feature doesn’t display what your app will actually look like on a different device which is why it’s always good to double-check because the actual results can be dramatic.

Image for post
Image for post

How To View Your App On Mobile

Viewing your React app on a mobile device is actually extremely easy to do and can be broken up into only three steps.

Step 1: Start Your React App On Your Computer

Before you can view your React app on another device, you will need to start it up in your browser via localhost. Once you have done this, take a look at the URL and write down the numbers that appear after localhost (the Port Number) as we will need these in a minute.

Step 2: Find your local IP

After you’ve started up your React app as normal, you’ll need to grab your local IP address. This is what will allow you to connect your mobile device to your computer. To do this, simply open up a new terminal and type in ipconfig. Once you hit enter, you should see a screen like this:

Image for post
Image for post

From here, you will want to look at IPv4 Address and write down the address that is shown off to the right.

Step 3: Viewing Your React App On Another Device

Once you have both the number after localhost from your URL and your local IP Address, you are ready to go to your other device. Simply pull up your device’s browser and type in the IPv4 Address you copied down earlier followed by a colon and then the port number. The format should look something like the following: 555.55.55.555:1234 once you hit enter, you should see your React App live on your mobile device!

Image for post
Image for post

Additional Info

One more thing that you might find useful is that you can use this method for not only mobile devices but also any other device you’d like! Just simply follow the 3 steps above on the device of your choice. Also, for mac users who don’t know how to find your local IP, you can read about how to do so below. I hope this helped you all out!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Alex Richards

Written by

Computer Science sophomore at the University of Mississippi. I'm currently learning Web Development which includes React JS, HTML, and CSS.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Alex Richards

Written by

Computer Science sophomore at the University of Mississippi. I'm currently learning Web Development which includes React JS, HTML, and CSS.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store