How to open a create-react-app from another computer connected to the same network?
node.jsNetworkingLocalhostCreate React-Appnode.js Problem Overview
I am using create-react-app and hosting in its default port localhost:3000 and want to access this from another device on the same network.
I got the IP of my host's IP (using ifconfig) 192.168.0.5 and tried opening 192.168.0.5:3000 but that did not work.
Is there any way to achieve this?
node.js Solutions
Solution 1 - node.js
Simply run HOST=0.0.0.0 npm run start
.
Afterwards open the url from another device on the network.
In your case, 192.168.0.5:3000
would work.
Documentation for setting HOST environment variables.
Solution 2 - node.js
As I can't post comment,
In complementary to Elad
if you have react-scripts start
instead of npm run start
HOST=0.0.0.0 react-scripts start
Works too !
Solution 3 - node.js
If you are on Ubuntu, simply run
$> sudo ufw allow 3000
Then access your app using your internal ip from local network. to get your local IP run:
$> ifconfig
Solution 4 - node.js
I had the same problem and when I disabled the private firewall it worked for me.
or if you want to enable private firewall you need to go here:
Control Panel\System and Security\Windows Defender Firewall\Allowed applications
and enable "change settings" than check private checkbox in Node.js row
Solution 5 - node.js
If you are on windows and the above solutions don't work, it is most probably a firewall issue. You can try looking in Allowed Applications in Control Panel, to check if node is allowed on private networks. Or looking in the Windows Defender Firewall with Advanced Security and checking the Monitoring\Firewall tab and check for Node.js.
Solution 6 - node.js
In my case, npm run start
used my Ethernet adapter's IP e.g. http://192.168.167.113:3000
but as I was accessing the site using WLAN, I needed to use WLAN IP which was 192.168.0.227
.
Make sure to use WLAN IP with the same port to make it work.
Solution 7 - node.js
I am using ubuntu 20.04 and both my android and laptop was connected to same wifi network.
Step 1: in package.json
set --host=0.0.0.0
for server
key.
...
"scripts": {
"go": "open http://localhost:3000; npm run server",
"e2e": "nightwatch --config nightwatch.js",
"run-e2e": "concurrently -s first -k \"npm start\" \"sleep 15; npm run e2e\"",
"test": "./node_modules/.bin/concurrently -k 'npm run server' 'npm run e2e'",
"start": "npm run server",
"server": "live-server public --host=0.0.0.0 --port=3000 --middleware=./disable-browser-cache.js"
},
...
Step 2: Add rule for port 3000 in ubuntu firewall.
sudo ufw allow 3000
Step 3: Now I can access same react app on
http://localhost:3000/
# desktophttp://127.0.0.1:3000/
# desktophttp://192.168.X.X:3000/
# from android and desktop both (replace with your internal IP)
Solution 8 - node.js
Can you please turn off your firewall and check 192.168.0.5:3000.
Thanks
Solution 9 - node.js
if you have two machines (lets say pc1 and pc2) and both are connected over the same wifi connection, then:
- bind your create-react-app development server to your Wireless LAN adapter wi-fi IPv4 address (on windows type the command
ipconfig.exe
and unix-like systems typeifconfig
).. you will find the ip address under something: Wireless LAN adapter Wi-Fi
(on windows)wlp5s0
inet Ip_Address
- in your sheel where you develop react run
HOST=your_IP npm run start
now, your development machin will be the server that serves the ui over it's IP_Address
Solution 10 - node.js
If you are facing
> HOST=0.0.0.0 : The term 'HOST=0.0.0.0' is not recognized as the name of a cmdlet
If I run (without using the npm wrapper script)
HOST=0.0.0.0 PORT=8000 ./node_modules/.bin/react-scripts start
To fix it, go to package.json and changed the "start" script to
"start": "./node_modules/.bin/react-scripts start",
then add this line of code.
"server": "live-server public --host=0.0.0.0 --port=3000 --middleware=./disable-browser-cache.js",
Then npm start
works fine.
more details link
Solution 11 - node.js
As someone else already mentioned, it's possible that React is just giving you the wrong IP address. In my case, React was pulling from one of my VMWare ethernet adapters. To open the right one, type ipconfig
in Command Prompt and use the IPv4 Address listed under "Wireless LAN adapter Wi-Fi" or your actual ethernet adapter.
Solution 12 - node.js
My react-scripts:3.4.1 is working,
from
"scripts": {
"start": "react-scripts start"
}
to ( 0.0.0.0 is not work )
"scripts": {
"start": "HOST=127.0.0.1 react-scripts start"
}
Solution 13 - node.js
After running npm start
go to your terminal "bash, cmd ..etc" and run ipconfig
IPv4-Adresse ..... : for example 111.222.333.444
open browser in your second device and type : 111.222.333.444:portNumber
Solution 14 - node.js
Sometimes there is another problem for Windows users.
Windows Firewall blocks NodeJs.
Just go to Windows Defender Firewall and click to Allow an app or feature through Windows Defender Firewall and allow Node.js
Solution 15 - node.js
In my case, Windows Firewall blocked port 3000. So adding an Inbound Rule to open port 3000 did the trick.
Windows Defender Firewall with Advanced Security > Inbound Rules > New Rule...
Solution 16 - node.js
If you are using windows then
- run this
echo ((ipconfig | findstr [0-9].\.)[0]).Split()[-1]
on your powershell or directly on the vscode terminal. - then do npm start and access your react-app using the ip shown by the above step ( yourIp:port , e.g. 192.168.8.100:3000)
Solution 17 - node.js
Step:1 - In webpack.config.js change host to "host: '0.0.0.0'", Step:2 - npm run start, Step:3 - run ipconfig and replace your ipv4 with http://192.168.X.X:3000,
In case it won't work add allow Nodejs in firewall and add Inbound rule with port 3000
Solution 18 - node.js
if you are using an azure VM make sure you add an inbound rule to allow traffic for port 3000 you can do this by
- go to your deployed VM
- go to networking
- and add an Allow inbound rule for port 3000
Solution 19 - node.js
at the end of 2021 was doing several react projects via tutorials at that time when i started apps, it was showing 2 links with localhost and ip address link and 2nd link was for devices it the same network. and now (18 may 2022) when i wanted to make react app independently, when i am starting my react app its giving link with localhost. in my case (windows 11) try http://yourComputerIp:portNumber
to get ip on windows type ipconfig in cmd and your ip address will be under name IPv4 Address