ionic serve with wifi hotspot to test on mobile - ionic-framework

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

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');

Using iPhone to connect to localhost running on Windows 10 Computer (No USB)

I'm developing an API and I am hosting it on my desktop server running Windows 10 using php -S localhost:8080 -t D:\Code\Projects\Website.
I want to be able to use my iPhone to visit this localhost:port webpage without plugging my iPhone into my computer via a USB since they are on the same network. Although, my desktop does not have WiFi capabilities; rather it is using an ethernet cable plugged directly into my router. When I use this address on my desktop, it works fine and takes me to my index.php page.
If I open my default gateway 10.0.0.1 NETGEAR Genie, I can see my iPhone's IP is listed as an "attached device."
I added an Inbound rule to my Firewall (TCP, port:8080, allow access, domain/public/private enabled), but I still cannot use my iPhone to reach this webpage using [my_desktop_ipv4]:[8080].
Would there be any security restrictions from my iPhone's iOS settings? Or am I missing something?

Install pwa in smartphone with localhost

I have a pwa and with localhost I can install on desktop, but I can't with my samrtphone andorid. Is it possible install a pwa without upload in a http server?
UPDATE:
I founded a work around that works, I putted a server on a port on my android smartphone using Dory - node.js (I have installed also express package)
https://play.google.com/store/apps/details?id=io.tempage.dorynode
Opening chrome in that port I see the "add to home screen popup".
This is unfortunately not an entire solution but an advice on where to look:
Make sure you are in the same wifi network with your Desktop and your phone.
Find out the local IP address of the Desktop PC (probably something like 192.168.0.x). You can find it under ipconfig (Windows) or ifconfig (Unix)
Host your PWA with the http server (remember to use ssl)
Try to access your hosted website from the phones browser, using the IP address and the port, probably something like 192.168.0.x:8080
If you serve your web page through another port (ex. 3000) make sure you configure Port Forwarding through your Router default config IP address
You should be able to open the website. So far I was not able to call the install event, but I will update my answer if I find out more.

Any known method to browse PC localhost from iPhone via USB cable (sans wifi)?

When I run a test mobile site in Visual Studio 2010 and it gives me a localhost:4331 I would like to find a way to forward the HTTP port over to my iPhone through the USB cable so I can test on the device.
They key here is using the USB cable instead of a wireless network, as I am working in a very locked down environment where no wifi is available.
I want the iPhone to connect to the internet through the USB cable, so it would be using my Windows LAN connection and have the Windows localhost be visible to iPhone Safari.
I don't think you can do this. You either need to use WiFi, or have your server exposed on a public network that is accessible via your carrier. You might have some more options with a Jailbroken device.
Follow these steps to see it working -
Connect your iPhone to your PC via USB
Find Tethering and Hotspot setting and enable "USB tethering" on your iPhone.
When your PC has been successfully been connected to the internet, type
"ipconfig" in the command prompt. Just copy the ipv4 address(along with port) and enter it on
the browser with your localhost active
If everything goes fine, then enter the same ipv4 address on your mobile(along with port) web
browser.
The server homepage will open on the iPhone.
I hope this helps.

Remote access to apache2 server

I'm trying to test my iPhone application on the device.
I have a mac computer which stores my development environment.
Right now I can only access PHP files using the http://localhost/PHPFileLocation
which does not work when I try to test my app on real device.
How do I configure apache2 to be accessible from outside?
Is it possible to configure it to a specific IP address?
I want to reach some php scripts located on my development machine running apache2 from my iPhone device.
Thanks
If your computer has a WiFi card then you should be able to attach the iPhone remotely to a ad-hoc Wifi network created on your dev machine.
I'm assuming your Mac is behind a router. You should be able to configure your router to port forward connections to your WAN facing IP address to port 80 (the HTTP port) on your Mac - see http://portforward.com/ for some help.
You may also need to turn the firewall off on your Mac.
Once this is set up correctly you can hit http://yourexternalIP/PHPFileLocation in your iPhone app and this will be directed by your router to the Apache2 server on your Mac. The external IP is normally found on your router's admin page somewhere.