Live-reload error: ERR_CONNECTION_REFUSED

Capacitor
1

I’m trying to run my app in live reload using the ionic plugin, but the resulting app shows a net::ERR_CONNECTION_REFUSED error screen instead of my app. The app is supposed to run on an external device, connected by USB. This setup worked normally before i had to format my WIN10 laptop, firewall is down, and cannot use https because i get a different error.

I’m using both --live-reload and --external, added cleartext: true to both configs, as well as the ip, and added the network security config, which wasn’t on my previous setup, but the error persists. I would like some guidance on what else i need to do.

Imagen de WhatsApp 2024-09-24 a las 09.56.27_3082590e
Imagen de WhatsApp 2024-09-24 a las 09.56.27_3082590e485×1080 15.4 KB

the command ran from the plugin is

npx cap run android --target=myphonesid --live-reload --external --no-sync --port=8100 --host=192.168.1.42 & npx ng serve --no-open --host=192.168.1.42 --port=8100 --configuration=development

npx cap doctor output:

   Capacitor Doctor   

Latest Dependencies:       

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

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/core: 5.5.1
  @capacitor/cli: 5.5.1
  @capacitor/android: 5.5.1

[success] Android looking great! 👌

capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.myname.myApp',
  appName: 'my app',
  webDir: 'www',
  server: {
    androidScheme: 'http',
    cleartext: true,
    url:'http://192.168.1.42:8100'
  },  

};

export default config;

capacitor.config.json

{
  "server": {
    "androidScheme": "http",
    "cleartext": true,
    "url":"http://192.168.1.42:8100"
  },
  "appId": "com.myname.myApp",
  "appName": "myApp",
  "webDir": "www",
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "300",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "screen",
      "SplashScreenDelay": "3000"
    }
  }
}

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.kiberno.denarioPremiumPro.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="android">
        <preference name="Scheme" value="http" />
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" android:usesCleartextTraffic="true" />                               
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />            
            <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
            <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
            <uses-feature android:name="android.hardware.location.gps" />
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
        <icon height="196" src="resources/ios/icon/icon-98@2x.png" width="196" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^5.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <engine name="browser" spec="~5.0.4" />
</widget>

androidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/title_activity_main" android:launchMode="singleTask" android:name=".MainActivity" android:theme="@style/AppTheme.NoActionBarLaunch">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <provider android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
        </provider>
        <meta-data android:name="com.google.android.geo.API_KEY" android:value="REDACTED, OBVIOUSLY" />
    </application>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-feature android:name="android.hardware.location.gps" />
</manifest>

network_security_config.xml

<?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>  <!--host loopback interface, no tocar -->
        <domain includeSubdomains="true">192.168.1.42:8100</domain> <!--casa-->
        <domain includeSubdomains="true">192.168.0.217:8100</domain> <!--ofc-->
        


    </domain-config>
</network-security-config>
2

To confirm, going to http://192.168.1.42:8100 on you Windows machine works after starting live reload?

You are 100% the firewall is off?

3

going to that url does not work.
only firewall installed is windows defender’s, but it is disabled for both public and private networks.

4

If going to that URL doesn’t work on your machine, then the issue is something to do with the JS dev server.

Try running just the following and see if you can access or if it throws any errors. You sure 192.168.1.42 is your IP?

npx ng serve --no-open --host=192.168.1.42 --port=8100 --configuration=development
5

yes, 192.168.1.42 is my ip, according to ipconfig

using that command does work, my browser shows a black screen, but it has the name of my application.

running the previously installed app in my phone shows my app correctly when using this command.

6

Try running the original way you were doing it and then open up DevTools for the device by going to chrome://inspect/#devices (in Chrome) and hit the refresh button. I’ve had it where the dev server isn’t quite ready by the time the app launches on the device.

7

I’ve tried pressing the reload button here, as well as pressing F5 in my keyboard, but it does not seem to work. Did i misunderstand what you meant?
image

8

That’s what I was talking about. Hmmmm…what if you just open up that URL in Chrome on the phone?

9

I don’t have chrome on the phone, but i do have Firefox. opening the URL gives me an “unable to connect” error.

10

It sounds like then the Ionic plugin is running something incorrectly since you said running npx ng serve by itself works.

One last test, run

npx ng serve --no-open --host=192.168.1.42 --port=8100 --configuration=development

again and try opening the URL in Firefox on the phone.

You are one version behind on Ionic CLI. You are on v6 where the latest is v7.

You can run to update:

npm install -g @ionic/cli@latest

EDIT
Oops, I saw your Capacitor CLI and thought it was the Ionic CLI. Your Capacitor CLI looks to be on the latest version.

11

using that command and opening on Firefox gives me the same black screen that it did in my browser. while it does not have the app name, it does have the ionic favicon, so i assume it works.

is there a configuration i need to change, or do i need to reinstall something?

12

--live-reload option of npx cap run command doesn’t run any server to live reload, just configures the Capacitor app to load from the hostname and port you pass as parameters, you have to have the server running independently with ng serve or whatever command your app uses to run the app in the browser and once it’s running, and without stopping it, you run the npx cap run command

13

It sounds like they are running it via the Ionic VS Code plugin which is running the following command:

npx cap run android --target=myphonesid --live-reload --external --no-sync --port=8100 --host=192.168.1.42 & npx ng serve --no-open --host=192.168.1.42 --port=8100 --configuration=development

It’s got npx ng serve as a second command at the end.

EDIT
On Linux, it’s && to run a second command. Not sure what Windows uses. The command mentioned only has one &. I wonder if that command is not running because of that.

14

from what i can see one & should work.

After some testing, it seems running

npx ng serve --no-open --host=192.168.1.42 --port=8100 --configuration=development

followed by

npx cap run android --target=myphonesid --live-reload --external --no-sync --port=8100 --host=192.168.1.42

works just fine. Thank you for all your help!!

1 Like