Capacitor Android live-reload not working on real device

Capacitor
1

Hi all, I have searched on the Git repo, but cannot see any issues specifically related to this.

We are using Capacitor version 7 and are able to run the app in Android Studio with live-reload on an emulated device - happy days!

However, when we attempt to run on a real device, connected via USB, after the splash screen is displayed, the app fails to load, displaying a blank page. After a while, in both the Chrome debugger page, i.e. chrome://inspect/#devices > inspect on the device, and in the emulator, the blank screen changes to an Android error page:

Web page not available
The web page at http://192.168.75.221:4209/ could not be loaded because:
net::ERR_CONNECTION_TIMED_OUT

In our developer-local build, as per the Capacitor docs for the " Using with Framework CLIs" section, we have defined our capacitor.config.json as follows, with the appropriate server section:

  ...
  "server": {
    "url": "http://192.168.75.221:4209",
    "cleartext": true,
    "androidScheme": "http"
  },
  android: {
    allowMixedContent: true
  }
  ...

In the network_security_config.xml for this profile we have also added:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>

  <base-config cleartextTrafficPermitted="true">
    <trust-anchors>
      <certificates src="system" />
    </trust-anchors>
  </base-config>

  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">10.0.2.2</domain>
    <domain includeSubdomains="true">192.168.75.221:4209</domain>
  </domain-config>
</network-security-config>

We are looking adding In-App Purchases, using RevenueCat, which recommends testing on a device and with live-reload this will be an awful development process, as it will not work in the browser and must be on device to use their SDK for mobile purchases.

I cannot see what we might have missed, so is there anything else required for live-reload to work on a USB connected device, rather than the emulator, or is this potentially a bug?

FYI - no issues with XCode and iOS, live-reload works like a charm there, along with Safari for dev console.

Many thanks in advance.
Paul

2

Have you made sure port 4209 is open in your firewall on the computer you are running on so the physical Android device can access it?

For live reload, there is an additional port for the WebSockets connection. believe the default for Vite is 3000.

3

Also, don’t include the port here:

In general, you don’t usually need to enable clear text because when running Capacitor with live reload, Capacitor temporarily edits your config enabling cleartext itself.

4

How are you running the app to use live reload?
You have set the url to http://192.168.75.221:4209/ in the capacitor.config.json file, but the error says it couldn’t load from https://192.168.75.221:4209/, so not sure why it’s trying to load from https unless something is changing the url.

1 Like
5

Try running `npx cap run android and ensure both your device and development machine are on the same network.

6

Sorry, typo on my part - it is http, not https - I have updated my original post to correct that.

7

OK, thanks - will try removing the port here.

Also, I’ve never had to change firewall settings before on my Mac; when I connect my iPhone to my Mac via USB I can access the web-app, with standard live-reload, in the Safari browser by IP address above, i.e. http://192.168.75.221:4209, and running on a device through XCode the live-reload works for the same server / port :thinking:

Interestingly, unlike my iPhone, I cannot access this address in Chrome on the Android device when connected via USB. I must admit to not being an Android user, day-to-day, and only use for dev testing; I have enabled USB and wireless debugging, but is there anything else on the device that I might need to configure to allow this to access my Angular server?

8

Thanks. However, they are definitely on the same network, this has already been verified.

9

OK, thanks for all your help, but this turned out to be a weird device or system settings issue.

After clearing data / caches, forgetting and re-adding wifi, turning off / on the developer mode, as well as USB and WiFi debugging, I was able to access my local Angular server in Chrome on the device. I then had to toggle USB and WiFi debugging a few times when Android Studio was open, as it simply wouldn’t connect to the device and kept throwing “unknown exceptions”, which are always very helpful :smile:

Anyway, sorted - thanks again for advice and support, much appreciated! :folded_hands:

1 Like