Vite expose network URL cannot open in mobile devices - vite

I have run below command for expose the application to external URL for viewing in mobile devices
npm run dev -- --host
VITE v3.1.8 ready in 618 ms
➜ Local: http://localhost:xxx/
➜ Network: http://xxx.xxx.x.xx:xxxx/
➜ Network: http://xxx.xxx.xxx.x:xxxx/
The network URL is working fine when I open it in my desktop but it can't be opened in mobile devices and show "Safari could not open the page because the server stopped responding" after a period of time.

This might be late but I encountered the same thing right now. You just need to turn off your firewall on public network. Windows security -> Firewall network -> Public network.

Related

Why can't I access my local Gatsby site on my phone

I am new to Gatsby, and I will be starting my first project today. I want to be able to test the site on my android phone to ensure mobile compatibility rather than using chrome dev-tools.
I have only ran a few commands so far.
1) Gatsby new site-name
2) cd site-name
3) gatsby develop --host 0.0.0.0 -p 8080
Everything compiles properly, and I can access the default Gatsby page through localhost:8080 or 192.168.1.81:8080 on the host laptop, but when i attempt to access from my android phone, it says that the server is unreachable. I am running windows 10 on my laptop, and so far Ive checked the firewall, and I've tried a few different ports as well. If someone has dealt with this issue and could help me that would be much appreciated!
I don't know why they blocked access by default :/ But you can access it by adding -H 0.0.0.0 to develop command. For example change your package.json to:
"develop": "gatsby develop -H 0.0.0.0",
you can fix this issue by using this command
gatsby develop -H 0.0.0.0
more information : from here
after you can use your pc ip address with the port number to debug gatsby site on your mobile
Example :
192.168.1.4:8000
I had to do:
gatsby develop -h 192.168.xx.xx -p 8080
Your phone and and the computer you are running from needs to be on same wifi/network. I need sometimes to reconnect my phone to the wifi to get it right. Suppose it has to do with the private ip adress the router is assigning to devices.
Then 192.168.1.xx:8000 can be opened on phone browser.

NodeJS Website Not Served to Local Machines from Docker Container

I have a simple NodeJS website. I serve it up locally to port 80 via:
npm start
and all is well. I can access the website through the local ip on phones and other devices using the same network, including the computer itself.
However, when I serve to 80 from the docker container running the npm server via
docker run -p 80:80
All seems well when I test the local ip on the host machine itself. But when I try to access it using phones and other devices using same network, I timeout.
I would expect the docker website to work everywhere on the local network, just the same as my non-container npm start command.
Windows Defender Firewall was blocking the connections going to and from the container.

can not access http://192.168.56.1:3000 from mobile device while using browsersync

I have installed browsersync using command npm install -g browser-sync in windows 10 x64. nodejs version 10.11.0 browsersync version 2.26.3
everything is working fine in desktop. but when i try to access http://192.168.56.1:3000 from mobile device using same wifi, i get "this site can't be reached"
i have installed another tool named dev-ip which returns this in powershell:
[ '192.168.56.1', '192.168.0.120' ]
the ip series 192.168.0.120 used to work fine in my mobile devices.
now, how to use the ip 192.168.0.120 instead of 192.168.56.1 in browsersync globally?
Just specify the host in your configuration that you want the server to run on.
Eg. In you case it would be
host: "192.168.0.120"
You can refer to the link below for more information.
https://www.browsersync.io/docs/options#option-host
Hi, guys. This is how it worked for me:
Source:
windows 10
all firewalls are closed
network access (from windows) to the PC is disabled
external url from gulp 192.168.56.1:3000
proxying local php site from OpenServer
external device - iphone safari/chrome
external (virtual) device - vwware with macos
make sure that Windows Defender firewall monitor in high-risk mode -> rules for incoming connections -> Node.js: Server-side JavaScript is enabled (and other necessary apps)
Solution:
look at what ip address in the home network my PC has (all devices are connected to the same network) - for example 192.168.1.103
in the gulp file I specify it host: "192.168.1.103",
save
checking it out
Important:
for source - external device - iphone safari/chrome - correct url is only 192.168.1.103:3000
for source - external (virtual) device - vwware with macos - correct urls is 192.168.1.103:3000 and 192.168.56.1:3000 both
Visually in pic:
Result:
Checked on all devices, in virtual devices, on the PC itself
browsersync works
the Internet is not lost
there is no address conflict within the network
Hope this will help someone too 🙂
You don't have to change the settings.
run cmd using Administrator
run ipconfig
copy IPv4 address like 192.168.43.52
Now open google on mobile and add http:// at the front and :3000 or :5500 at the back.
like run http://192.168.43.52:3000

Angular 4 Failed to load resource: net::ERR_CONNECTION_REFUSED

I guess I will start at the start of my application.
I am making a full mean-stack application and I want it to run in docker. To use docker I am using a virtualbox with Ubuntu. When I run my docker-compose, everything is working on localhost:4200. Now I want to open my application on my host machine (Windows 7).
When I go to my application via (ip addres should be kept secret, right?) xxx.xxx.xx.xxx:4200/login the page looks fine, but I get these errors:
I am using Angular cli 1.4.1 with node 8.4.0
Why am I getting these errors and how do I fix them?
My docker-compose
Your server which is listening on port 4200 is listening on your xxx.xxx.xxx.xxx interface (not necessary to hide lan IP, but nevermind...).
Your angular application is running on your host system. the localhost is the localhost of your host system, not the guest. so you have two solutions:
changing your urls inside the angular application to point to xxx.xxx.xxx.xxx:4200 instead of localhost:4200.
Forwarding your 4200 port from your host to your guest system using virtual box :
shutdown guest.
select guest and click on settings
go to the network tab.
click on "advanced"
then select "ports redirections" and bind your host 127.0.0.1:4200 to your guest's 4200 port

Node web server not visible externally, but Python is (MacOS)

I'm just starting to build an Ionic 2 app, but I can't get it working on my mobile device.
Python (works)
To demonstrate that the phone can see the host, I tried a Python server:
$ python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 ...
If I go to http://192.168.8.101:8000 on my phone, it connects fine and displays the directory listing.
Node (fails)
However, when I start Ionic:
$ ionic serve -p 8000
[...]
[INFO] Development server running
Local: http://localhost:8000
External: http://192.168.8.101:8000
I can load it in my host's web browser, but I can't see it from my phone nor another computer (it times out). I also tried a basic node server:
$ npm install http-server -g
$ http-server -p 8000
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8000
http://192.168.8.101:8000
With the same result as Ionic: accessible from the host, but not from the phone.
Is there something blocking the request? Or is there some Node configuration I'm missing? I'm new to both Mac OS and Node, so I don't know where to look.
Embarrasingly, this turned out to be a firewall issue. In System Preferences > Security & Privacy > Firewall > Firewall Options, Node was explicitly set to deny incoming connections:
Changing it to Allow has fixed it. Phew!
Just execute ionic address and you'll get an IP address in your command line. Try with that ipaddress:port number from your mobile which will enable you to access your site from your phone.
Just incase if the ionic address command doesn't return anything, you need to execute the below command to point it to your ip,
ionic serve --address YOUR_IP_ADDRESS
Hope this helps!

Resources