[Bug]: Android Live Reload broken in Capacitor 5.7.2

[alextreppass]

Capacitor Version

[warn] The bundledWebRuntime configuration option has been deprecated. Please,
use a bundler to bundle Capacitor and its plugins.
💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 5.7.2
@capacitor/core: 5.7.2
@capacitor/android: 5.7.2
@capacitor/ios: 5.7.2

Installed Dependencies:

@capacitor/cli: 5.7.2
@capacitor/core: 5.7.2
@capacitor/android: 5.7.2
@capacitor/ios: 5.7.2

Other API Details

yarn --version
3.2.1

OSX Sonoma 14.4.1

Platforms Affected

• iOS
• Android
• Web

Current Behavior

Our capacitor.config.ts when running in live reload mode (-l external), has the following config:

server: {
  url: process.env.LIVE_RELOAD_SERVER_URL,
  cleartext: true,
},

LIVE_RELOAD_SERVER_URL is set as http://10.0.2.2:3000 for Android (as Android Studio treats the host machine's ip as 10.0.2.2), and http://0.0.0.0:3000 for iOS.

We are using this setup to proxy a local dev server running on port 3000 for fast iteration without having to run npx cap run + rebuild each time.

Issues

In 5.7.2 with Android, when going to the url capacitor's live-reload.ts generates (e.g. http://192.168.1.241:3000) the webpage does not load. There is an ERR_CLEARTEXT_NOT_PERMITTED error:

It doesn't look like there have been updates to https://github.com/ionic-team/capacitor/blob/main/cli/src/util/livereload.ts since @IT-MikeS introduced it, so something else must be going on here.

Expected Behaviour

This worked great on 5.4.2:

  @capacitor/cli: 5.4.2
  @capacitor/core: 5.4.2
  @capacitor/android: 5.4.2
  @capacitor/ios: 5.4.2

The webview would load correctly.

Project Reproduction

https://github.com/alextreppass/capacitor-live-reload-bug

[alextreppass]

Here's a finding and a fix, through adding console.log to the build capacitor js:

Debugging here, where cleartext is handled:

capacitor/cli/src/cordova.ts

Lines 1080 to 1085 in e45d60d

	const cleartextString = 'android:usesCleartextTraffic="true"';
	const cleartext =
	config.app.extConfig.server?.cleartext &&
	!applicationXMLAttributes.includes(cleartextString)
	? cleartextString
	: '';

config.app.extConfig.server comes through as { url: 'http://192.168.1.241:3000' }, i.e. missing the clearText exported from our capacitor config object.

The generated xml is missing the cleartext attribute:

<?xml version='1.0' encoding='utf-8'?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:amazon="http://schemas.amazon.com/apk/res/android">
<application  >

</application>

</manifest>

Manually patching cleartext: true back in the built cordova.js works — the simulator loads and liveReload works for Android.

Unfortunately, there's no way for us to reliably patch this at build time, because we can't control when capacitor writes this file + copies it to the phone.

[alextreppass]

Update: iOS works fine, I was running into another bug #7324 that was preventing app startup on iOS. I have unticked 'affects iOS' in the issue description

[ionitron-bot]

This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed.
Please see the Contributing Guide for how to create a Sample App.
Thanks! Ionitron 💙

[fcamblor]

+1 I noticed the same behaviour as the one @alextreppass described in his repro

I don't understand why server.cleartext is stripped at some point.

[e-e-e]

I am also encountering this issue and was able to reproduce with the repo shared by @alextreppass

[MirazMac]

Facing the same issue. In my case: android\app\src\main\assets\capacitor.config.json is being replaced with a dynamic one when I run the live-server.

Example:

On my root capacitor.config.json, I have this in the server section:

"server": {
		"url": "http://192.168.1.4:3000",
		"clearText": true
	}

I also ran "npx cap sync"

Then the file at: android\app\src\main\assets\capacitor.config.json also contains the same thing.

But when I run
npx cap run android -l

The file at: android\app\src\main\assets\capacitor.config.json changes to the following:

	"server": {
		"url": "http://172.25.144.1:3000"
	}

And when I exit the run command. The file reverts back to the original contents. So my specified values in the root capacitor.config.json is not being used for the server.

[george-martinec]

still and issue 👍🏻 live-reload using custom server field in config.

[alextreppass]

Hi team. A reproduction was attached above a few weeks ago — I don't think the 'needs reproduction' label is still appropriate. Please let me know if you need any more information

[piktur]

I can see the cleartext property is omitted on reassignment here:

https://github.com/ionic-team/capacitor/blob/5b2ab7c68db4e77b8b2961e927acc5a708ee260f/cli/src/util/livereload.ts#L123C2-L148C4

Noting the protocol is also hardcoded and prevents SSL.

[piktur]

This Gist preserves server options declared in capacitor.config.*, also implements an additional CLI option to override the HMR server protocol.