React App On Network
When designing your web app, one of the most useful things is to see is how it looks on different devices. You know what it looks like on a Laptop. How about a big monitor desktop or an iPhone?
The purpose of this repository is to teach you how to see your react app in a development environment across different devices. Code through your PC, look at your app through your phone. Instantly.
Set Up Your React App (Node.js)
- Type in
npx i create-react-app .on your terminal. This creates your react web-app (where . is your current folder) - Run
npm start, which launches a local environment of your web-app
You should see something similar to this. Note that running the I.P address of http://192.168.56.1:3000 will work on your local computer. But it Will Not work on other devices.
Make It Work
http://192.168.56.1:3000 is a default I.P address for react. You want to be connected to your router’s I.P. address, which you can easily find with ipconfig on Windows. Type this on windows powershell.
-
Find your router and get the
IPv4address. The web-app is going to be hosted onYour_IPv4:3000. There is no need to change any code thanks to how creat-react-app was built. -
Make sure that your router is on Private instead of Public. A private network is more trusted than a public network, which is why it techincally gives more power than public (imagine public means you’re in a public area so your device trusts no one).
- Lastly, make sure that Node.js can run on private networks. In your Windows search bar, go to
Control PanelandSystem and Security. Then underWindows Defender Firewall, clickAllow an app through Windows Firewalland search forNode.js JavaScript Runtime. Make sure that Node.js is installed on your computer.
- You are finished. On your phone or other device, type in
Your_IPv4:3000. Congrats! You are able to modify the web-app and it will instantly sync on your other device too. When you’re finished with development, you can roll it into production!