How to run your Turbo Native Android app on a physical device locally

While working on the Android app for matcharoo using turbo-android, I hit a problem. My app would load in the Android Studio emulator just fine, but when I connected my Android phone via USB, the WebView wouldn’t load my web page.

Here’s what I did.

I enabled the logging for Turbo Android. You can do it in your MainActivity like this:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    Turbo.config.debugLoggingEnabled = true
}

Then I inspected the logs via Logcat and found the following output:

TurboLog . onPageStarted   [session: tab_play, location: http://10.0.2.2:3000/play]
TurboLog . onReceivedError [session: tab_play, errorCode: -8]

I had no clue what -8 meant, so I connected to my app via Chrome’s remote browser (chrome://inspect). Then I found my remote target and clicked on the inspect link:

Then I found the description of the error in the HTML document.

The error turned out to be net::ERR_CONNECTION_TIMED_OUT:

I immediately knew that the standard IP for accessing your local web server through the emulator, 10.0.2.2, was not accessible.

The solution is to change the startLocation of your SessionNavHostFragment from http://10.0.2.2:3000 to your local network address.

On macOS, you can find the address via ipconfig getifaddr en1 or ipconfig getifaddr en0. Then use the address as your start location.

class SessionNavHostFragment : TurboSessionNavHostFragment() {
    override var startLocation = "http://192.168.0.3:3000"
}

You need to change your network_security_config.xml to allow the new domain.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config xmlns:android="http://schemas.android.com/apk/res/android">
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">192.168.0.3</domain>
    </domain-config>
</network-security-config>

You also need to bind your Rails server to that address:

bin/rails server -p 3000 -b 192.168.0.3

Rebuild your app for your physical device, and voilà! Everything should work now.

You can discuss this article on X/Twitter:
https://twitter.com/kyrylosilin/status/1744384157390606396

Share on: