How to run Flutter Web on mobile chrome from IDE

Question

My goal is to have "chrome on android" as a selectable run/debug configuration in Intellij.

I am looking for a way to run my flutter web app on my android phones browser. I believe this could be achieved with a custom run configuration in Intellij using a combination of adb and the chrome devtools remote connection.

Clarification: This should be handsfree, all answers have in common, that I have to manually open the url, but I'm looking for a way to "launch" the url on the phone, just like we can launch a web app in chrome for desktop.

I am aware that it its possible, to get the webapp running on the attached device - what I am looking for is a run configuration to automate the steps of starting the webserver, copying the url pushing it to the device and then opening the url there

Solution 1

I finally got around to solving the problem using a little bash/expect script.

You need to have expect installed on your system, most systems come with it pre installed.

Quick explanation: start the process and wait for it to be up and running, then make the reverse tcp connection and push the URL via adb (this was the crucial step which was missing so far). The script then hand over the control back to the user so that you can use r/R/q like you are used to - that might even work with Intellij/VSCode, but I haven't tried that yet since I switched to vim/tmux for development.

#!/usr/bin/expect -f

set timeout -1


spawn sh -i -c {
    flutter run -d web-server --web-port 49403
}

set run_id $spawn_id

expect "For a more detailed help message, press \"h\". To quit, press \"q\"."
spawn sh -c {
    adb reverse tcp:49403 tcp:49403
    adb shell am start -a android.intent.action.VIEW -d http://localhost:49403
}

interact -i $run_id

I suggest setting your physical device into "never-sleep" mode, as the device must be unlocked for this to work.

Solution 2

You could do this using port reversing, which basically redirects your localhost port request to yor laptops localhost port.

So when you run your flutter web app using flutter run -d web-server you will see your webapp being served at localhost e.g http://localhost:49403.

• connect your phone to your device
• run adb reverse tcp:49403 tcp:49403
• Now you can just enter the address in your phones browser and see the app running.

so when your run the adb reverse command the phones local port 49403 will be routed to your laptop’s port 49403. and you will be able to see your app running in your phones browser.

Solution 3

If you want debug only, you may use

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

then access http://>your-ip>:8080

** also you should ensure that your port(8080) is open.

Comments

[Damian K. Bast]

I am aware that it its possible, to get the webapp running on the attached device - what I am looking for is a run configuration to automate the steps of starting the webserver, copying the url pushing it to the device and then opening the url there.