msassa's avatar
Level 18

Laravel Valet api, to consume from flutter app

Hi, anyone knows how to setup laravel valet to consume an api form flutter? I have an api in http://api-app.test but I can’t find a way to connect from my flutter app … thanks !

0 likes
7 replies
Loach's avatar

You can use ngrok or if you are using laravel valet I think the command is valet share

msassa's avatar
Level 18

Yes, using valet share, with a public url works. But I was looking for a local connection. Is better to development. Thanks !!

1 like
ak47's avatar

same issues on Laravel api to Flutter app Local host testing.

hehe's avatar

I would appreciate to know if you found how to make it work.

Danakin's avatar

@hehe If you or anyone else finds themselves here after all this time (this post was pretty high on my search results), I found a post on medium that worked for me to get android emulator to connect to valets .test domains (2023/08/18, Flutter 3.7.9, Dart 2.19.6, Google Pixel 3A Emulator @ Android 13)

iOS worked for me out of the box

https://medium.com/@masterix/how-to-use-laravel-valet-with-ios-simulator-and-android-emulator-5d8496cf3209

Basic Steps

# 1. Stop Android Emulator

# 2. Add android sdk and emulator to $PATH if you haven't done so in .zshrc / .bashrc
$ export ANDROID_HOME=$HOME/Library/Android/sdk
$ export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools

# 3. List Emulators
$ emulator -list-avds

# 4. Start Emulator with Write Access to System Partition, change "Pixel_3a..." with your emulator 
$ emulator -avd "Pixel_3a_API_33_arm64-v8a" -writable-system

# 5. Allow root access
$ adb root
$ adb remount

# 6. Download Emulators /etc/hosts file
$ adb pull /etc/hosts

# 7. Add .test domain to downloaded hosts file, not the host file of your computer. Android Emulator network interface maps 10.0.2.2 to localhost
$ vim hosts
$ vim hosts
127.0.0.1  localhost
10.0.2.2   android.test # add this, change this to the url of your laravel api

# 8. push modified hosts file back to android emulator
$ adb push hosts /etc/hosts

The medium posts also has instructions how to enable valet secured domains if you need that

shiroamada's avatar

My solution towards Laravel Valet + Flutter is follow step

  1. Login ngrok https://dashboard.ngrok.com/get-started/setup, connect your AuthToken to your machine.
  2. Create a free domain name - https://dashboard.ngrok.com/cloud-edge/domains , which you can use it as domain name to connect between your local development and Android Emulator.
  3. Go to your Laravel project, run valet link your-domain.ngrok-free.app , it will update in Valet Setting for your-project.test & your-domain.ngrok-free.app
  4. Now you can run ngrok http --scheme=https --domain=your-domain.ngrok-free.app your-project.test:80, *remember not valet share, just ngrok`. Below screen is displayed
ngrok                                                                                                             (Ctrl+C to quit)

Take our ngrok in production survey! https://forms.gle/aXiBFWzEA36DudFn6

Session Status                online
Account                       shiroamada (Plan: Free)
Version                       3.3.4
Region                        Asia Pacific (ap)
Latency                       17ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://your-domain.ngrok-free.app -> http://your-project.test:80

You can use always use https://your-domain.ngrok-free.app for your database records, and it will work between your local Laravel API development and your flutter development.

For Laravel , TrustProxies.php:-

protected $proxies = '*';
protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO | Request::HEADER_X_FORWARDED_PREFIX | Request::HEADER_X_FORWARDED_AWS_ELB;

If you still This request has been blocked; the content must be served over HTTPS., you can following these step to delete the hot file: https://laracasts.com/discuss/channels/vite/laravel-vite-assets-blockedmixed-content-issues-in-production-environment?reply=898059

Another solution fix the HTTPS issue: https://stackoverflow.com/a/71618444/129209

shaheen's avatar

1- in laravel project php artisan serve : to make a local server

2- in flutter use 10.0.2.2:8000 instead of localhost:8000 as AVD uses 10.0.2.2 as an alias to your host loopback interface var url = Uri.http('10.0.2.2:8000');

1 like

Please or to participate in this conversation.