Ionic-cli: ionic serve don't work with Ionic DevApp or wifi (external addresses)

[brcontainer]

Description:
ionic serve work only in http://localhost:8100, but wifi address not access, in version 4.

Steps to Reproduce:

• Install npm i [email protected] -g
• Create a simple project
• Enter in project folder cd project1 (an example)
• Execute ionic serve -c
• Get your IP local (eg. with ipconfig)
• Open your local browser (firefox, chrome, internet explorer) a address like this http://<local ip>:8100

Output:

Results in [email protected]:

C:\Users\inphinit\project1>ionic serve -c
ionic-app-scripts.cmd serve --address localhost --port 8100 --livereload-port 35730 --dev-logger-port 53703 --consolelogs --nobrowser
[app-scripts] [14:14:28]  ionic-app-scripts 3.2.4
[app-scripts] [14:14:28]  watch started ...
[app-scripts] [14:14:28]  build dev started ...
[app-scripts] [14:14:28]  clean started ...
[app-scripts] [14:14:28]  clean finished in 5 ms
[app-scripts] [14:14:28]  copy started ...
[app-scripts] [14:14:29]  deeplinks started ...
[app-scripts] [14:14:29]  deeplinks finished in 216 ms
[app-scripts] [14:14:29]  transpile started ...
[app-scripts] [14:14:33]  transpile finished in 3.82 s
[app-scripts] [14:14:33]  preprocess started ...
[app-scripts] [14:14:33]  preprocess finished in less than 1 ms
[app-scripts] [14:14:33]  webpack started ...
[app-scripts] [14:14:33]  copy finished in 4.19 s
[app-scripts] [14:14:36]  webpack finished in 3.25 s
[app-scripts] [14:14:36]  sass started ...
[app-scripts] [14:14:37]  sass finished in 911 ms
[app-scripts] [14:14:37]  postprocess started ...
[app-scripts] [14:14:37]  postprocess finished in 7 ms
[app-scripts] [14:14:37]  lint started ...
[app-scripts] [14:14:37]  build dev finished in 8.34 s
[app-scripts] [14:14:37]  watch ready in 8.48 s

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

Results in [email protected]:

C:\Users\inphinit\project1>ionic serve -c
> ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35730 --dev-logger-port 53703 --consolelogs --nobrowser
[app-scripts] [14:26:07]  ionic-app-scripts 3.2.4
[app-scripts] [14:26:07]  watch started ...
[app-scripts] [14:26:07]  build dev started ...
[app-scripts] [14:26:07]  clean started ...
[app-scripts] [14:26:07]  clean finished in 6 ms
[app-scripts] [14:26:07]  copy started ...
[app-scripts] [14:26:07]  deeplinks started ...
[app-scripts] [14:26:07]  deeplinks finished in 237 ms
[app-scripts] [14:26:07]  transpile started ...
[app-scripts] [14:26:11]  transpile finished in 4.00 s
[app-scripts] [14:26:11]  preprocess started ...
[app-scripts] [14:26:11]  preprocess finished in less than 1 ms
[app-scripts] [14:26:11]  webpack started ...
[app-scripts] [14:26:11]  copy finished in 4.39 s
[app-scripts] [14:26:15]  webpack finished in 3.48 s
[app-scripts] [14:26:15]  sass started ...
[app-scripts] [14:26:15]  sass finished in 830 ms
[app-scripts] [14:26:15]  postprocess started ...
[app-scripts] [14:26:15]  postprocess finished in 6 ms
[app-scripts] [14:26:15]  lint started ...
[app-scripts] [14:26:16]  build dev finished in 9.06 s
[app-scripts] [14:26:16]  watch ready in 9.19 s

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://192.168.56.1:8100, http://192.168.0.105:8100
       DevApp: Carflix Inspeção@8100 on DESKTOP-RGGPCQJ

       Use Ctrl+C to quit this process

My ionic info:

Ionic:

   ionic (Ionic CLI) : 5.0.0

System:

   NodeJS : v10.16.0
   npm    : 6.9.0
   OS     : Windows 10

Other Information:

Livereload not work in emulators, probably related to: https://github.com/ionic-team/ionic-cli/issues/4007

[bnallmaster]

I am having a similar issue with Ionic CLI 5.0.0. I finally got it to build and got things updated and installed and the Livereload is not working. For a while I was getting an error that said nodeModule is null. I resolved that issue and both ionic cordova run ios and cordova run ios are launching the app. When I try ionic cordova run ios -l or --livereload it acts like it is building and no errors but it hangs on the splashscreen and won't go beyond that. I have been testing with this a majority of the day and has been difficult to nail down the issues. It also appears that the Legacy or New Build system in iOS is no longer important to it being able to build. I also tried the clearing the network settings on my iPhone and got a new Trust pop up that I accepted. It seemed to get closer after I did that but would stay loading on the splash screen. Yes I am using Angular.

[bnallmaster]

Screenshot of what my CLI looks like when trying to run Livereload and getting stuck on splash screen

[brcontainer]

I am having a similar issue with Ionic CLI 5.0.0. I finally got it to build and got things updated and installed and the Livereload is not working. For a while I was getting an error that said nodeModule is null. I resolved that issue and both ionic cordova run ios and cordova run ios are launching the app. When I try ionic cordova run ios -l or --livereload it acts like it is building and no errors but it hangs on the splashscreen and won't go beyond that. I have been testing with this a majority of the day and has been difficult to nail down the issues. It also appears that the Legacy or New Build system in iOS is no longer important to it being able to build. I also tried the clearing the network settings on my iPhone and got a new Trust pop up that I accepted. It seemed to get closer after I did that but would stay loading on the splash screen. Yes I am using Angular.

Here is the same, on the splash screen the application hangs, on the android I minimize the application and open again, so it works, but it is one of the problems I noticed in 5.0.0.

They must be related.

[bnallmaster]

I got it to at least get past the splash screen but only on iOS emulator, NOT device, and there is no console logging with any of it.

[brcontainer]

I got it to at least get past the splash screen but only on iOS emulator, NOT device, and there is no console logging with any of it.

about logs: https://github.com/ionic-team/ionic-cli/issues/4007

[imhoffd]

You need to use ionic serve --devapp now if you wish to serve to the DevApp. See the CHANGELOG: https://github.com/ionic-team/ionic-cli/blob/develop/packages/ionic/CHANGELOG.md#500-2019-05-29

[brcontainer]

You need to use ionic serve --devapp now if you wish to serve to the DevApp. See the CHANGELOG: https://github.com/ionic-team/ionic-cli/blob/develop/packages/ionic/CHANGELOG.md#500-2019-05-29

No, DevApp is only a example ... in Wifi is not showed/approachable

See again my first comment in Results in [email protected]:, it: Local: http://localhost:8100

only this is shown in version 5, and I try to enter the IP address of my machine on the machine itself and it also does not work, so it's not a firewall problem.

Please reopen, the problem is a bit "beyond" devapp.

[imhoffd]

Both these changes are in the changelog.

DevApp:

--devapp is now a required flag if you want to use DevApp with ionic serve

WiFi:

• localhost is now the default host for ionic serve, ionic cordova run -l, and ionic capacitor run -l
  
  
  
  • Port forwarding via native-run is used for connected Android devices
  
  
  • For iOS hardware devices, you may need to serve your app externally with --address=0.0.0.0
  
  

---

To host the dev server externally, use ionic serve --address=0.0.0.0. If you use a specific IP address, you are prone to selecting the wrong one for your WiFi network.

[brcontainer]

devapp is now a required flag if you want to use DevApp with ionic serve

unfortunately in the documentation this is not mentioned, but I believe that soon they will update the texts https://ionicframework.com/docs/appflow/devapp#capturing-console-logs

WiFi:

• localhost is now the default host for ionic serve, ionic cordova run -l, and ionic capacitor run -l

  • Port forwarding via native-run is used for connected Android devices
  • For iOS hardware devices, you may need to serve your app externally with --address=0.0.0.0

To host the dev server externally, use ionic serve --address=0.0.0.0. If you use a specific IP address, you are prone to selecting the wrong one for your WiFi network.

Thanks! About this details * localhost is now the default host for ionic serve, ionic cordova run -l, and ionic capacitor run -l*

Thanks for all guidance!

[bnallmaster]

I would like to be able to serve the app to my physical iPhone plugged into my Macbook with console logs to the terminal and not the DevApp. It appears by the docs and change logs that should be possible, but it was not getting past the splash screen. I have tried ionic cordova run ios -l, ionic cordova run ios --livereload, ionic cordova run ios --device -l --address=0.0.0.0, ionic cordova run ios --device -l --address=0.0.0.0 -disableHostCheck, etc. I was copying the exact commands from the CLI release note docs. I have tried with a physical device and simulator. The building is not the issue. It is when it goes to run it on the device that it hangs up. I am able to ionic cordova run ios no problem without live reload. I am also able to ionic cordova build ios and then open it in XCode and run it no problem there. It would be great to get this resolved and I would be happy to provide any info that is needed.

[brcontainer]

I would like to be able to serve the app to my physical iPhone plugged into my Macbook with console logs to the terminal and not the DevApp. It appears by the docs and change logs that should be possible, but it was not getting past the splash screen. I have tried ionic cordova run ios -l, ionic cordova run ios --livereload, ionic cordova run ios --device -l --address=0.0.0.0, ionic cordova run ios --device -l --address=0.0.0.0 -disableHostCheck, etc. I was copying the exact commands from the CLI release note docs. I have tried with a physical device and simulator. The building is not the issue. It is when it goes to run it on the device that it hangs up. I am able to ionic cordova run ios no problem without live reload. I am also able to ionic cordova build ios and then open it in XCode and run it no problem there. It would be great to get this resolved and I would be happy to provide any info that is needed.

Running Ionic4 or Ionic1 (or 3)?

[bnallmaster]

Ionic:

Ionic CLI : 5.0.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)

Utility:

cordova-res : 0.3.0
native-run : 0.2.2

System:

Android SDK Tools : 26.1.1 (/Users/taylorkorensky/Library/Android/sdk)
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v10.15.3 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001

[imhoffd]

unfortunately in the documentation this is not mentioned, but I believe that soon they will update the texts https://ionicframework.com/docs/appflow/devapp#capturing-console-logs

Thanks! Will update.

@bnallmaster Can you just make a new issue?

[bnallmaster]

@dwieeb yes I will do that thanks.

[imhoffd]

@brcontainer Just pushed a commit to the docs! https://github.com/ionic-team/ionic-docs/commit/006802e2fcc1f560c9be2de234332cb533f7a984

[brcontainer]

@brcontainer Just pushed a commit to the docs! ionic-team/ionic-docs@006802e

GREAT! And thanks for the tip!
I really still do not have much knowledge about the repository organization used by the Ionic organization/team specifically. I will try to collaborate with pushs as well, when I believe it to be right.

Thanks again!