如何从连接到同一网络的另一台计算机打开创建-反应-应用程序？

小开

Can you please turn off your firewall and check 192.168.0.5:3000.

Thanks

小开

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.

小开

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 !

小开

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.

小开

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.

小开

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"
}

小开

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

小开

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 type ifconfig).. 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

小开

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

小开

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

小开

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...

小开

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/ # desktop
http://127.0.0.1:3000/ # desktop
http://192.168.X.X:3000/ # from android and desktop both (replace with your internal IP)

小开

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)

小开

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

小开

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

小开

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.