Capacitor 3 live reload with capacitor.config.ts not working

[dennisameling]

Description:

Ionic and Capacitor have built-in support for live reload: https://capacitorjs.com/docs/v3/guides/live-reload#using-with-ionic-cli. The live reload functionality leverages the capacitor.config.json file to set the server parameter, so that the Android and iOS builds know which server to use for live reload.

Capacitor v3 (currently in beta) adds support for a TypeScript configuration file (capacitor.config.ts). However, Ionic has capacitor.config.json hardcoded in two places:

https://github.com/ionic-team/ionic-cli/blob/85097593e45837e1a0bdef8f3e20a5f44f6cd1e6/packages/%40ionic/cli/src/lib/integrations/capacitor/config.ts#L4

https://github.com/ionic-team/ionic-cli/blob/77b02a39d08fb369c6b95b5f3b0c255370e9fc23/packages/%40ionic/cli/src/commands/deploy/manifest.ts#L22

Because of this, even if a .ts config file is present, Ionic will write the server parameters to a newly created capacitor.config.json, because of which the config never reaches the android and ios folders. Capacitor prefers the .ts file and therefore doesn't look for a .json file anymore.

Steps to Reproduce:

• Install Capacitor 3 beta
• Ensure you have a TypeScript config file, not a JSON one
• Run a live reload command, e.g. ionic cap run android -l --external
• Notice a new file capacitor.config.json is created alongside the existing capacitor.config.ts, therefore the server parameter never reaches the Android and iOS builds

Output:

n/a

My ionic info:

Ionic:

   Ionic CLI                     : 6.12.4 (C:\Users\Dennis\AppData\Roaming\nvm\v14.15.5\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.5.5
   @angular-devkit/build-angular : 0.1100.7
   @angular-devkit/schematics    : 11.0.7
   @angular/cli                  : 11.0.7
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 3.0.0-beta.6
   @capacitor/core : 3.0.0-beta.6

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   NodeJS : v14.15.5 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.11
   OS     : Windows 10

Other Information:

N/A

[uncvrd]

Confirming that this happens to me as well, was wondering why my iOS livereload stopped working after transitioning to a typescript config!

[elylucas]

Hi @dennisameling, @uncvrd

Could you try this prerelease version of the CLI with Cap 3 RC3 and let me know if the issue still happens?

npm i -g @ionic/[email protected]

Thanks

[dennisameling]

@elylucas thanks, however that version seems to break ionic cap run android -l --external.

Before:

? Please select which IP to use: (Use arrow keys)
> 172.26.0.1 (vEthernet (Default Switch))
  192.168.56.1 (VirtualBox Host-Only Network)
  172.16.1.94 (Wi-Fi)
  172.17.160.1 (vEthernet (VirtualBox Host))
  192.168.96.1 (vEthernet (Ethernet))
  172.21.64.1 (vEthernet (Wi-Fi))
  172.25.240.1 (vEthernet (WSL))

After:

? Which device would you like to target? (Use arrow keys)
> Pixel 3 API 29 (emulator) (Pixel_3_API_29)
  Pixel 4 API 30 (emulator) (Pixel_4_API_30)

So instead of IP addresses I now get available emulators 😊 Let me know if there's anything else I can test!

[nphyatt]

I can't reproduce on this branch. running ionic cap run android -l --external with only a capacitor.config.ts in my root app directory works as expected for me. I pick the external IP I would like to serve on because when running on the Android emulator using http://localhost:8100 will not work as local host is relative to the emulator in my case the IP that the emulator can reach on my local network is 192.168.86.22 and then I pick the emulator I'd like to run on from the list and it works with live reload enabled.

@dennisameling it looks like you're using a number of virtual networks so you need to make sure that the IP your binding ionic serve to is visible to the android emulator. One way you can test is by doing ionic serve --external then attempting to navigate to the External url in prints in the emulators browser app.

[nphyatt]

To be clear this will not work with the current version of the CLI.

If you clone this repo however and check out the capacitor-3 branch with the changes from #4610 and then following the instrurctions to setup and link the local version of the cli then running ionic cap run android -l --external works for me with a capacitor.config.ts file.

The hardcoded references to the capacitor.config.json is because in the native application the config is always a json file. the CLI will translate the .ts file to .json and then copy to the correct location inside the platform. You can see it looking for the path to the json config file within the native projects here

[NS21fpsy]

@elylucas thanks, however that version seems to break ionic cap run android -l --external.

Before:

? Please select which IP to use: (Use arrow keys)
> 172.26.0.1 (vEthernet (Default Switch))
  192.168.56.1 (VirtualBox Host-Only Network)
  172.16.1.94 (Wi-Fi)
  172.17.160.1 (vEthernet (VirtualBox Host))
  192.168.96.1 (vEthernet (Ethernet))
  172.21.64.1 (vEthernet (Wi-Fi))
  172.25.240.1 (vEthernet (WSL))

After:

? Which device would you like to target? (Use arrow keys)
> Pixel 3 API 29 (emulator) (Pixel_3_API_29)
  Pixel 4 API 30 (emulator) (Pixel_4_API_30)

So instead of IP addresses I now get available emulators 😊 Let me know if there's anything else I can test!

I experience the same issue. Instead of choosing which IP to use (as it was on older versions of capacitor and ionic-cli), I get the selection of devices. But I can't make it work this way!

Unfortunately, I don't know if it's my English skills or if @nphyatt addressed another thing, but I don't understand his answers from May 12. I would like to know how I can use the live reload functionality and development experience on a connected device or an emulator as it was before with ionic cap run android -l --external? This is my first project with Capacitor 3 and I can't believe that there is no working live reload for the app on the device (ionic serve is not an issue).

My ionic info:

Ionic:

   Ionic CLI                     : 6.16.3
   Ionic Framework               : @ionic/angular 5.6.9
   @angular-devkit/build-angular : 12.0.3
   @angular-devkit/schematics    : 12.0.3
   @angular/cli                  : 12.0.3
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.0.0
   @capacitor/android : 3.0.0
   @capacitor/core    : 3.0.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v14.15.5 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.11
   OS     : Windows 10

capacitor.config.ts looks like this

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

const config: CapacitorConfig = {
  appId: ' (here is my app id) ',
  appName: 'PPVT',
  bundledWebRuntime: false,
  webDir: 'www',
};

export default config;

Thank you

[codercodingthecode]

Furthermore, if you update from 2 to 3 today as I did. You will run into the same issue. The .json file keeps getting recreated instead of using the .ts version with base settings.

From this guide: https://capacitorjs.com/docs/updating/3-0

[Sampath-Lokuge]

Yes, I also have the same issue: Any workaround for this?

capacitor.cmd init alert-mobile io.ionic.starter --web-dir www
[error] Cannot run init for a project using a non-JSON configuration file.
        Delete capacitor.config.ts and try again.
[ERROR] An error occurred while running subprocess capacitor.

        capacitor.cmd init alert-mobile io.ionic.starter --web-dir www exited with exit code 1.

[alvarosinmarca]

With capacitor.config.ts not work, i returned with .json.

ionic info

Ionic:

   Ionic CLI : 6.13.1

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   NodeJS : v14.17.0
   npm    : 6.14.13
   OS     : Windows 10

package.json

    "@capacitor-community/admob": "^3.2.0",
    "@capacitor/android": "3.1.2",
    "@capacitor/camera": "^1.0.3",
    "@capacitor/core": "3.1.2",
    "@capacitor/device": "^1.0.2",
    "@capacitor/geolocation": "^1.0.2",
    "@capacitor/ios": "3.1.2",
    "@capacitor/network": "^1.0.2",
    "@capacitor/splash-screen": "^1.1.0",
    "@capacitor/status-bar": "^1.0.2",
    "@capacitor/storage": "^1.0.3",

    "@ionic-native/core": "5.35.0",
    "@ionic-native/network": "5.35.0",
    "@ionic-native/onesignal": "5.35.0",
    "@ionic/angular": "5.6.13",
    "@ionic/angular-toolkit": "4.0.0",

[Sampath-Lokuge]

@alvarosinmarca Sorry, I didn't get what you have said here? I have tried with Json and Cap 3 too. But that too not working. This is a HUGE problem now.

[mpragliola]

Same problem here.

	version
OS	Win10 + WSL
Node	v16.9.1
NPM	7.21.1
@capacitor/core	3.2.3

[uniqbit-julian]

Hi together,

any update on this issue? We're currently facing a blocker, as with the JSON file it's going to be super tricky to use multiple environments as described within the capacitor docs: https://capacitorjs.com/docs/guides/environment-specific-configurations#export-environment-specific-capacitor-configuration

[adamschoenemann]

Same problem here (on android, haven't tried IOS).

Ubuntu 20 Node v16.13.2 NPM 8.1.2 @capacitor/core 3.2.5