Connect a Nativescript mobile app with a local api server - mobile

So I'm running into what's probably a typical issue and although there seems to be several related questions and answers here and here but they don't exactly apply to my question.
I have a local django server (localhost:8000) running in development.
I would like to easily develop a Nativescript mobile app connecting to my django server by using Nativescript/Vue with Axios to make the http calls. I prefer to start development/testing in ios. I have two choices for development with Nativescript - either using 'tns run ios' which brings up the ios emulator on my mac or using 'tns preview' which allows me to test via my actual iphone.
When I am making a basic call via axios to http://localhost:8000/myapi that call yields an http status result of null.
I tried using a loopback address (e.g., 10.0.2.2 - which I believe may work for the Android emulator) but that yielded the same result.
I tried using my local IP address of my mac - i.e., instead of localhost, using my local 192.168.xx.xx address for the call but that didn't work
I finally was able to get it working using ./ngrok to tunnel my local server to an outside IP address. Now that works, but it's not ideal since that IP address may change from time to time.
What is the suggested solution for easily connecting to my local api server using either Nativescript preview or running the ios emulator?

Emulator API Path:- http://10.0.2.2:5000. Like Your API Local Path Is http://198.168.1:5000/api or http://localhost:5000/api Then Replace With http://10.0.2.2:5000/api And Port Address Is Same Like As Your Local API Port.
Path- App_resources/Android/src/main/AndroidManifest.xml :-
android:usesCleartextTraffic="true" Add in application tag
iOS File Path- App_Resources/iOS/Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>10.0.2.2:5000</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>

As noted by #Manoj you need to allow for http within your emulator settings defined here for ios.
Additionally, if you are using django you must also do the following:
determine your local ip address (via ifconfig for mac)
Your allowed hosts in settings.py contains this IP address - e.g., ALLOWED_HOSTS = ['192.168.14.14','localhost','127.0.0.1'] - where 192.168.14.14 is your local ip address
You start your server as this ip address and NOT your localhost - e.g., python manage.py runserver 192.168.14.14:8000
This will work for both the emulator (tns run ios) and the playground on your phone (tns preview)

Related

Running localhost react app on mobile phones

I need to connect my react app to my local network by typing in localhost on any device. Im not sure if this is possible. Right now I use my computers IP address and I type the address into my phone browser with port 300 and it works. The only thing is that I am using auth0 and I need a list of callback urls for it to work. Basically anything other than localhost in the url will be blocked. So i need to type in localhost:3000 on my phone and my react app needs to show up.
You can use a service like lvh.me that resolves back to the IP you provide as the subdomains. This will be fairly stable, but you will need to specify the domain to Auth0.
For example, if your IP address is 10.0.0.5 and your app is running on port 3000, from your local network you would visit http://10.0.0.5.lvh.me:3000/ from your phone. This request would resolve to 10.0.0.5:3000.
I am afraid it's not possible. The localhost refers to 127.0.0.1 IP in your computer which is like a globally followed convention for all the devices in the world.
Your router assigns an IP like 167.12.124.12 for each of the devices connected to it and if any other device is connected to the same router, they can communicate with each other by using the IP the router created for the devices.
The router assigned IP won't change unless your device goes offline for some reason. Try adding the IP as an allowed URL in the list of URLs in Auth0.
Make sure both your phone and computer are connected the same wifii. Then, try to figure out how to find your IPv4 Address. The screenshot below shows where to find it on mac, I guess you can find it by typing ipconfig on terminal, too. This IPv4 address is your localhost. I usually run my react app's on port 3000 so when you go to yourIPv4address:3000 on your mobile phone's browser you can see your react app on mobile. Hope it helps. Good luck.

having trouble viewing react app on mobile device

at my wits end here. I am trying to view my react app hosted at: http://localhost:3000 on a mobile device. When I navigate to http://xxx.xxx.xx.x:3000 on my mobile device (x being my ip address) I get the error that the server refused to respond.
-I have tried adding an incoming rule in my windows defender firewall to allow access on port 3000 from tcp connections. Yet the error still persists.
-I have even temporarily attempted to turn off my firewall to test the connection and I still get the same result.
-my mobile and my localhost are on the same network
i have specified an outgoing rule for port 3000 as well
I am using create react app for my boilerplate code so I haven't edited any of the webpack settings. I am hoping someone might have a suggestion for me as to what I can try next?
I used my ipv6 address instead of my ipv4 address which was the incorrect address

how to self-hosting a website on ubuntu 18.04 system and using lampp server?

I'm trying to self hosting a website on ubuntu 18.04 system and using lampp server. i can not access the site through my public ip address. can anyone help me out?
i have also created a virtual server in my router. but till something is wrong.
you can do that by logging into the router which provides you the internet …
then make port forward to all the requests that coming from external under port 80 ( which is the http browsing port ) and forward it to the IP which has your ubunto OS …
you may as well add RDP connection if you have windows , in short , you will have to find the responsible port which works for each protocol and then forward it to your ubunto OS
like https , will work under 443 so you may as well forward it if you wan your website to work securely as https .
as for the domain name … you may use services fore free like DYN.com or noip.com
some routers btw can accept logins directly from dyn and noip and other similar websites which provide the dynamic hosting service .

Reactjs Script Server not available

"React-scripts", a series of scripts from create-react-app starter pack allows me to use "react-scripts-start" to initialize a server.
Everything works fine, the server turns on and I can access it on localhost:3000 or by using the IP:3000
The problem is when I use other devices from my house. I try to connect to the IP:3000 and it doesn't work. I'm getting "Server not found".
Is it a Windows access problem or am I supposed to set up the server?
I managed to solve my issue. For me, it was not in the firewall, not in the configuration files. Instead, it was the router.
Since I live in UK, I have Hub 3.0 from Virgin Media.
The solution is:
1) Navigate to Connected Devices and copy the IP address for your device. In my case it was xx.xx.0.16/24 so I copied "xx.xx.0.16"
2) Navigate to Advanced Settings > Security > Port Forwarding
3) Click on "Create new Rule". For Local IP will be your IP address, local start port & end port 3000; external start port & end port 3000; Protocol choose both; Enabled on
4) Apply changes
Now here is the trick. When I run the command
npm run start
I'm getting a message which says:
You ca now view your project in the browser:
Local: http://localhost:3000/
On Your Network: http://xx.xx.37.1:3000/
I can navigate to that IP address : 3000 on the hosting laptop however if I want to make other devices access it, I must use the IP address set up in the router which for me is xx.xx.0.16:3000

How to use local macbook server to allow multiple devices to view Reactjs page?

I have a local server running Reactjs on my Macbook. (newbie in React)
1) How could I change the http://localhost:4001 name to something else (e.g. http://www.test.com)
--> I'm using webpack-dev-server --port 4001
2) How could I allow up to 500 iOS/Android device to connect to this local server? (e.g do how to setup a router to broadcast this?)
--> Found this ReactJS-and-ngrok but not sure what's the concurrent users it's able to support.
3) How to allow the device to connect to a wifi without internet access?
First, see what IP is your Macbook in your local network. System Preferences->Network. Suppose your Macbook IP is 192.168.1.70 and your server is on 4001 port. Then you can start your webpack-dev-server with the following options: --output-public-path="http://192.168.1.70:4001/" --host="0.0.0.0" --public="192.168.1.70:4001". You can still access it via localhost name on Macbook, but on other devices use full IP + port number as address.
Can't say anything about setting domain... may be you can configure your router somehow? Sorry, newer had to face such a task

Resources