SyntaxScrewer's Blog

April 22, 2017

Ionic 2 + Laravel API – Running on the device

Filed under: Ionic 2,Laravel — geekymaira @ 7:04 pm

I am working on an app using Ionic Native Facebook plugin & Laravel Socialite.
The native facebook plugin works with Cordova so I needed to test it on the actual device. I will write a detailed post on how I achieved this (if I ever do) but for now I want to talk about some issues I ran into.

First things first.

  • I have all the appropriate headers set in my Laravel App. Allow Origin is set to * so this is not a CORS issue.
  • I have Cordova Whitelist plugin (installed and configured to allow all domains while creating the ionic project)

Okay so here goes.

ionic run android –device -l -c
Okay so the command above starts a server on your device and then serves the file using the server. This is not how the app will run when in production. The app will be served from the filesystem so my test environment was incorrect. I had to drop the “-l” flag and just do “ionic run android –device”

Update: I tried running this again after using “php artisan serve –host 0.0.0.0” and it worked. So this was not really an issue. Of course it is going to be an issue for CORS because now you’re service files from a server running on your mobile so CORS comes into play. When files are served from the local filesystem – Cors is not really an issue. Either way didn’t matter for me because I have the right headers set on my api. If CORS is bothering you here is a great blog entry from ionic explaining the unknowns.

Laravel Valet messes things up
With Postman I was accessing my api using the convenient .dev domain name that valet offers. Guess what – Cannot be accessed on the device (see next point).

Laravel sites/api’s hosted on dev machines are not accessible by the mobile device
With or without using Valet laravel sites are not accessible from other devices on your network. This includes your mobile phone. A side note : It’s a good idea to have your mobile connected to the same network while testing.. Anyway, so the problem is that valet creates this convenient domain *.dev but its not registered on your local network. Only your dev machine understands it. This makes things complex.

So there can be two possible solutions.

1. Don’t use Valet. Use “php artisan serve” instead.

2. Use valet but then try and fix things by following this answer on stackoverflow (I have not tried this yet).

php artisan serve won’t work either!
Okay so here’s the problem. PHP Artisan Serve basically sets up the app on “localhost:8000” or “127.0.0.1:8000”. This is done on the development machine (my laptop in this case). When I try and access this url from the ionic code running on my device it doesn’t find a server running on localhost (the mobile in this case). Thus it throws an error “Connection Refused”.

The Solution!!
For the time being (during dev) I figured out that the best way to test on device is to run “php artisan serve –host 0.0.0.0” , By doing this your Laravel site/app is magically accessible on your local network by accessing the IP address of the host machine. So in my case running “php artisan serve –host 0.0.0.0” on my laptop with Ip (192.168.1.3) – I was able to successfully access the Laravel App by make HTTP requests from Ionic to the url “192.168.1.3:8000”. YAY!

I’m sure there are going to be more issues as I progress but so far so good.

Cheers!
SyntaxScrewer

References:
http://blog.ionic.io/handling-cors-issues-in-ionic/
http://stackoverflow.com/questions/30675025/access-to-laravel-5-app-locally-from-an-external-device
http://blog.ionic.io/handling-cors-issues-in-ionic/
http://stackoverflow.com/questions/36035717/use-local-apache-api-from-laravel

 

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: