How to View React Code Edits Instantly on Mobile Device ๐Ÿ“ฑ๐Ÿ’š

Phone in sand.

create-react-app has a very cool way of allowing you to view your code updates instantaneously on your phone, using an IP address that you simply type into your URL bar: but it doesn’t always work out of the box.

Here we will fix this issue, by finding the correct IP to navigate to, and – if necessary, and if you’re using a server – adding this IP to a list of allowed CORS URLs in an Express app.

Usually create-react-app provides an “On your network:” URL to navigate to for development on other devices. However this URL didn’t work for me, and thus here we will find out how to use the IP of your WiFi network in a URL to connect to the React server on mobile.

I did this in Windows, so I started by opening the Windows Command Prompt (or PowerShell) and typing in ipconfig:

Image of Windows PowerShell.

Hit enter, and scroll down to the section titled “Wireless LAN adapter Wi-Fi.” There you will find a list of IP addresses. The one we are looking for is titled “IPv4 Address”:

Screenshot of Windows PowerShell.

This is the IP we are going to use to search in our mobile address bar. We will format the IP into a URL as shown below – replacing my IP with yours – and adding :3000 at the end, or the correct number of the server your React app is hosted on:

http://192.168.1.88:3000

Note that it’s “http” and not “https.” At this point, you may try to type in this address to your mobile device, making sure that the device is connected to the same WiFi network as your computer. This should theoretically be all that needs to be done if you don’t have any backend server set up.

If it connected, great! You’re done. If it won’t connect, you can take it a step further and add the URL to CORS in your Express app (assuming you have one).

netServForMobileReactDev = 'http://192.168.1.88:3000'; // <== My WiFi Network's IP

app.use(express.static(__dirname + '../..'));
app.use(cors({
  origin:[
    corsOrigin,
    netServForMobileReactDev, // <== My WiFi Network's IP
  ],
  methods:['GET','POST', 'DELETE'],
  credentials: true 
})); // enable set cookie

If it worked now, great! If not, you’re on your own – but keep pushing through and you’ll figure it out. Then write your own blog post, so you can check back when you forget how to do it (which is what prompted me to write this post) and so other people with a similar problem can benefit.

Good Luck!

//Omar

Woman on man's shoulders with sparklers.

Theme Inn on Unsplash