ionic cannot reach by local IP - ionic-framework

I am new to ionic / macos,
when i start ionic serve ,
i can view it on macos web browser (http://localhost:8100)
however, i cannot open it by remote device at the same LAN by IP address (http://192.168.1.100:8100)
I did the following checking
macos side
network utility , port scan 8100 success
remote device (ipad)
ping 192.168.1.100 ok
port scan 192.168.1.100 not success
Then, i read the forum and try
ionic serve --address 192.168.1.100
This time, macos (http://192.168.1.100:8100) success
but remote device (not success)
Pls. help if any setting on macos can be done. thanks

Related

Accessing localhost API from android device

I'm developing a Flutter app on a physical android device, I don't know much about networking and I'm having a trouble using an API from the phone to a local database on my laptop.
I reviewed all the answers in this post
Cannot connect to localhost API from Android app
Nothing seems to work for me, I'm using Apache server on XAMPP, and the API works just fine from the laptop (127.0.0.1:8000/api/Students) but when I try to access it from the phone it doesn't work (I replaced 127.0.0.1 with the IP of my laptop which I took from ipconfig)
XAMPP control panel
when I try to access the server from the phone using laptop-IP:80 it access normally the same with laptop-IP:80/phpmyadmin
XAMPP dashboard
but only when my phone is connected to the laptop mobile hotspot, when I connect the two devices to the same WIFI network it shows that it's unreachable:
but when I try laptop-IP:8000/api/Students this happens:
this site can't be reached
I tried to modify Apache httpd.conf:
#Listen 12.34.56.78:80
Listen 8000 <-- Added this
from what I understood this makes the server listens to port 8000 but I'm left with the same problem
NOTE: all the pictures show my attempts to use the API on my phone's Chrome browser
You need to do some tweaks to the url to access it in the device as localhost is only known to the machine not the devices on which the app is running.
The urls are different for different devices
Emulator
Real phone (with usb debugging)
1.Emulator
static const baseUrl = "http://10.0.2.2:8000";
2.Real Device
static const baseUrl = "http://localhost:8000";
Additionally you need to run these command in your cmd,
adb reverse tcp:8000 tcp:8000
Now your requests would go like:
get('$baseUrl/api/Students');

Ionic 4 App 192.168.8.200 not working on mobile device

Im tried to serve ionic 4 mobile app on using mobile browser, but its not worked for me. http://localhost:8100 is really worked on local server, Ionic 3 app is relay working following method 192.168.8.200:8100
anyone know how run the ionic 4 app different devices using IP address
Thanks
Try this:
learn what IP address your machine has (windows, run "ipconfig")
run 'ionic serve --address 192.168.0.72' (my address is 192.168.0.72 on dev PC)
now from another device on local network go: 192.168.0.72:8100
You can change port as well as needed:
https://ionicframework.com/docs/cli/commands/serve
Please note with this command you will also need to use this IP address to debug instead of localhost:8100. Your browser by default will still try to get to localhost first.
Update 2:
Try also running it this way: 'ionic serve --address 0.0.0.0'
This way both localhost and 192.168.0.72 (my PC interface) work.
Update:
Please use the --host option (e.g. --host=192.168.0.24) to specify the host of the dev server.
example: ionic serve --address 0.0.0.0
For Ionic using Angular:
ng run app:serve --host=192.168.8.200 --port=8100

ionic serve with wifi hotspot to test on mobile

I'm trying to test our app in the mobile browser.
I started a wifi hotspot
Ran ionic serve on our project root
Connected to wifi on mobile device
On mobile browser went to http://localhost:8100
but I get a page not found. Shouldn't the ionic app load on browse if I connect to the wifi hotspot of the pc running the app server?
ionic serve like in the accepted answer did not work for me. But
ionic serve --host=COMMON_NETWORK_IP and connecting to
COMMON_NETWORK_IP:8100 on the phone, did.
Look up your COMMON_NETWORK_IP via ifconfig (unix) or ipconfig (windows).
If you are on WiFi and use a mac, you can also use a GUI:
localhost is your local address. If you want to access to the ionic app served by your PC from your mobile device browser, you should use the ip address of your PC instead of localhost, since localhost is the address of your mobile device.
So just run an ifconfig (unix) or ipconfig (windows) on your terminal and access to the app with this address from your mobile device : http://IP_OF_YOUR_PC:8100
This may not work depending on your firewall rules.
The best way to do it:
Make Personal Hotspot from your mobile Device to your Computer
run ionic serve
Read the the output this command throws. There you can see an External IP-Adress
Open the Browser on your smartphone and use the Exernal IP-Adress + 8100 (Port)
For example: http://192.168.32.12:8100
All you need to do is make sure your laptop and mobile are on the same Wifi Connection
Just Run ionic serve
Network: http://192.168.1.***:8100/
Type that network address in your mobile browser
It works for all create-react-app & vue-cli
Hot reload will also work
If you don't have WiFi use a mobile hotspot

Connecting Real device to Android emulator

I am developing a network app for Android and I'm still stuck on connecting my real Android device with an device-emulator running on my desktop computer.
I've created private network with a router, so the only ones connected to the network are my pc and my mobile phone, in order to avoid firewall/closed ports problems.
My PC ip is 192.168.1.100 and I'm trying to ping each other so I can sea reachability of each network node. Ping works fine from my PC (not the emulator console) to the phone.
The problem is that I want to ping the PC-emulator from my mobile phone, not the PC itself... For that, I use the emulator console... Should I use my computer IP or should I use another one? I've seen some ip's like "10.0.x.x" here http://developer.android.com/guide/developing/tools/emulator.html
But I guess those are for connecting two EMULATORS, right?
Besides, I've tried to connect them by socket, creating a redirection for the port via Emulator console, but still can't connect them.
Any clues?
Thanks!!
I tried the early solution I gave you and it didn't work. As you said maybe the reason is the redir command of the emulator console only redirects packets comming from the localhost.
So I searched for a simple proxy server and used it in the same machine to test it out.
http://www.java2s.com/Code/Java/Network-Protocol/Asimpleproxyserver.htm
With this I used the following configuration:
on the proxy:
String host = "localhost";
int remoteport = 3000;
int localport = 4000;
Then run the emulator instance:
Server socket listening on port 2000.
Open telnet instance and issue "redir add tcp:3000:2000"
And finally on the real device open a socket to the machine address on port 4000.
So the network map looks like:
Device <-> machine:4000 Proxy machine:3000 <-> :3000 Emulator :2000 -> Application
This worked for me using the same application on the device and emulator.
I've reached the conclusion that emulator can only receives packets coming from the loopback (127.0.0.1), since when you issue "redir add tcp:port:newPort, it only redirects the first port (associated to the loopback) to the second port (associated to the "emulator virtual ip").
I've tried to create a bridge, which redirects all the packets coming to my pc to the IP 127.0.0.1, but still not works. Thus, I think the emulator has been developed only to communicate with other emulators...
I hope anyone that comes here contradicts me.
You may be able to connect a real device with an emulator instance.
Did you tried setting a redirection on the emulated device and then connect the real device trough a java socket?
For example:
On the emulated device open a server socket listening on port 2000, then open a telnet connection and issue the command:
redir add tcp:4000:2000
Finally, open a socket on the real device to your machine address (192.168.1.100) on port 4000.

Android Emulator Networking

How can I make Android Emulator and the host machine (Ubuntu 9.10) connected together to the same network?
For example
Android Emulator IP Address : 10.0.2.15
Ubuntu Host IP Address: 10.0.2.16
Thanks in advance
You have to use port forwarding using either 'adb forward' tool of Android or using 'redir add' from the emulator console
Android uses an internal router through which it accesses the host network connection. In that router, there is a firewall to avoid communication to the external world. If you need to enable communication between your emulator and the host, you need to use port forwarding option that is provided in Android emulator. Use telnet localhost port# in Android console. port# is usually appearing in the title bar of the emulator window. Numbers such as 5554, 5556, 5557 and so on.
Use add <protocol>:<host-port>:<guest-port> to define a port forwarding rule for your router. Protocol is udp/tcp and host port is the port of your computer and guest port is the port of your emulator. So, if you want to transfer all the http call to theh ost use add tcp:80:8080
More information is here