[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.

[ionitron-bot]

This issue has been labeled as type: bug. This label is added to issues that that have been reproduced and are being tracked in our internal issue tracker.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.