How to open a create-react-app from another computer connected to the same network?

Question

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?

score 111 · Answer 1 · answered Dec 25 '18 at 10:11

111

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.

answered Dec 25 '18 at 10:11

Elad

19,079
18
62
71

That's awesome Elad, Thanks! – oriharel Jan 29 '19 at 10:20
17

Solved, If you're using webpack, Open package.json add `--host 0.0.0.0` option to script.start field. Done. – kitta Apr 25 '19 at 19:26
I just get blank white page, is there a way to debug whats wrong? – Lance Jun 30 '20 at 17:05
1

[MacOS] If you don't know your IP, go `System Preferences > Network > Advanced > TCP/IP` and check the IPv4 Address – DeepBlue Oct 12 '20 at 18:25
how can we replace system IP address to localhost? – ksh Nov 30 '20 at 08:29
It is better to set HOST=127.0.0.1, because I always get warnings when HOST=0.0.0.0 – timthedev07 Jun 26 '21 at 14:13
How to change port from 3000 to different – heyom Sep 19 '21 at 02:26
4

You might not actually need the `HOST=0.0.0.0` part. In my case, running the normal start command (`npm run start`) worked. I was able to see the app on my phone's browser at URL `[My Macbook's IP address]:3000`. I used [this](https://apple.stackexchange.com/a/147777/407739) to find my macbook's IP address. The [docs in your post](https://github.com/facebook/create-react-app/blob/main/docusaurus/docs/advanced-configuration.md) mention this default behavior, under the HOST section. – jaquinocode Nov 10 '21 at 00:58

ssaakkaa · Answer 2 · 2021-09-09T13:00:52.120

23

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

edited Sep 09 '21 at 13:00

answered Sep 09 '21 at 12:53

ssaakkaa

390
2
6

1

Thank you, It worked fine. But is there any security issues?? – Faith Sabu Nov 17 '22 at 16:21

score 20 · Answer 3 · answered Jul 10 '20 at 19:42

20

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

answered Jul 10 '20 at 19:42

A_J

1,635
1
18
31

4

What about windows users? – wilson382 Oct 16 '20 at 19:19
@wilson382 Add a firewall rule to allow port 3000. To know how to add a firewall rule read https://stackoverflow.com/a/33657331/13163131 – humble_barnacle Jun 14 '22 at 10:33

score 17 · Answer 4 · answered Jan 28 '19 at 17:10

17

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 !

answered Jan 28 '19 at 17:10

Fanor

293
1
3
9

score 5 · Answer 5 · answered Apr 13 '21 at 10:37

5

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)

answered Apr 13 '21 at 10:37

Himanshu Patel

568
6
14

Does it makes a difference if one is on wifi and the other on cable? Since one is 10.0.0.101 and the other is 10.0.0.107? – Lucas Steffen Apr 19 '21 at 14:48
Until both device are on same network cable and wifi is same. Check internal IP (in ubuntu I use `ifconfig` command). If both device can access this internal IP (mine was `192.168.1.5`) then There is no issue. Only possible if cable comes from WiFI router and mobile connected to same WiFi (you case possibly) – Himanshu Patel Apr 19 '21 at 19:08
1

Working as a charm – Shamsul Arefin May 11 '23 at 17:01

score 4 · Answer 6 · answered Apr 23 '20 at 16:21

4

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.

answered Apr 23 '20 at 16:21

Saad

198
2
12

score 4 · Answer 7 · answered Jun 14 '20 at 12:01

4

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.

answered Jun 14 '20 at 12:01

Kian Fay

41
3

1

Also, I found the output of the `npm run start` was printing a misleading IP address. I had to check my ip via `ipconfig` .Once using the proper IP address my issue was resolved. – Louis Sayers Dec 27 '20 at 00:19
Thanks for your comment. I had the same problem, But Why do you think npm run starts to print a misleading IP address? I had to change to the correct IP address and it worked – Dijiflex Jun 30 '21 at 10:24
It totally was! Thank you! – guilfer Oct 31 '21 at 17:10

score 2 · Answer 8 · answered May 18 '22 at 12:37

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

score 1 · Answer 9 · answered Oct 29 '20 at 12:43

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

Thanks this was the only answer that helped me. :) – llsanketll Dec 14 '20 at 11:14 — llsanketll, Dec 14 '20 at 11:14

score 1 · Answer 10 · edited Jan 18 '21 at 14:46

1

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

edited Jan 18 '21 at 14:46

Ravi Singh

1,049
1
10
25

answered Jan 18 '21 at 12:33

lukalortk

11
1
4

Amit Kundu · Answer 11 · 2021-09-24T06:11:07.803

1

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

edited Sep 24 '21 at 06:11

answered Sep 23 '21 at 15:56

Amit Kundu

119
5

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/29903415) – m4n0 Sep 24 '21 at 04:46
Thanks for pointing it out. I'll be careful in the future on this. – Amit Kundu Sep 24 '21 at 06:04

score 1 · Answer 12 · answered Dec 10 '21 at 18:04

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.

score 0 · Answer 13 · answered Nov 21 '17 at 12:20

0

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

Thanks

answered Nov 21 '17 at 12:20

Nishant Joshi

223
2
10

This is not correct as provided IP might be correct for you but not for others depending on whe WAN ip address – Sayok Majumder Jun 27 '22 at 17:03

smapira · Answer 14 · 2021-09-23T20:33:26.593

0

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

edited Sep 23 '21 at 20:33

answered Jun 18 '20 at 15:01

smapira

87
7

score 0 · Answer 15 · answered Dec 05 '20 at 17:58

0

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

answered Dec 05 '20 at 17:58

Ahmad Alkurdi

11
1

score 0 · Answer 16 · answered Mar 08 '21 at 17:51

0

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

answered Mar 08 '21 at 17:51

Snake Monkey

1

score 0 · Answer 17 · answered Jul 05 '21 at 05:19

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)

score 0 · Answer 18 · answered Jul 21 '21 at 05:59

0

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

answered Jul 21 '21 at 05:59

vishalsripathi

1

1

Please provide an explanation of your answer so that the next user knows why this solution worked for you. – Elydasian Jul 21 '21 at 08:34

score 0 · Answer 19 · answered Dec 03 '21 at 16:34

0

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

answered Dec 03 '21 at 16:34

Edgar Portales

1

CoolSid · Answer 20 · 2023-04-22T19:18:02.257

0

if you are on windows ,please turn off your firewall and replace your address on the phone with the Wireless lan adapter WIFI ipv4 address which you can find it easily by typing ipconfig on PowerShell.

edited Apr 22 '23 at 19:18

answered Apr 22 '23 at 19:16

CoolSid

1
2

score 0 · Answer 21 · edited Aug 17 '23 at 11:50

0

You must connect the same network while serving with other systems, then you can simply enter:

npm start HOST="current_ip_address"

(ex: 191.161.221.209) and share the ip_address with port number

edited Aug 17 '23 at 11:50

Tyler2P

2,324
26
22
31

answered Aug 16 '23 at 09:44

Sriram

7
1
4

How to open a create-react-app from another computer connected to the same network?

21 Answers21

Linked