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

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

Steps to Reproduce:

  • Install npm i ionic@5.0.0 -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 ionic@5.0.0:

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 ionic@4.12.0:

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 16 (4 by maintainers)

Most upvoted comments

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 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!

@dwieeb yes I will do that thanks.