Bug: serving more than one app at a time is broken

[jthoms1]

From @Chuckv01 on November 13, 2016 4:26

Short description of the problem:

When attempting to run ionic serve on more than one app at a time, an Error: listen EADDRINUSE error occurs when attempting to serve the 2nd app.

What behavior are you expecting?

Two or more Ionic apps could be run in the browser at the same time.

Steps to reproduce:

1. Create two new Ionic 2 projects:
   a. ionic start --v2 test tabs
   b. ionic start --v2 test2 tabs
2. Start serving the first app: cd test && ionic serve
3. Attempt to serve the second app: cd test2 && ionic serve
4. An error occurs and 2nd app fails to be served:

[20:12:59]  ionic-app-scripts 0.0.43 
[20:12:59]  watch started ... 
[20:12:59]  build dev started ... 
[20:12:59]  clean started ... 
[20:12:59]  clean finished in 1 ms 
[20:12:59]  copy started ... 
[20:12:59]  transpile started ... 
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 0.0.0.0:53703
    at Object.exports._errnoException (util.js:1036:11)
    at exports._exceptionWithHostPort (util.js:1059:20)
    at Server._listen2 (net.js:1252:14)
    at listen (net.js:1288:10)
    at net.js:1398:9
    at _combinedTickCallback (internal/process/next_tick.js:77:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:592:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:serve" "--"
npm ERR! node v6.7.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ ionic:serve: `ionic-app-scripts serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the ionic-hello-world@ ionic:serve script 'ionic-app-scripts serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

Which @ionic/app-scripts version are you using?
0.0.43

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.43
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Xcode 8.1 Build version 8B62

_Copied from original issue: driftyco/ionic-app-scripts#383_

[jthoms1]

@Chuckv01 The quick fix to this is provide a port parameter to the second app.
ionic serve -p 8000

[jthoms1]

From @Chuckv01 on November 15, 2016 0:0

@jthoms1 Appreciate the response. However, there are two issues with that approach:

1. It does not work. Using ionic serve -p 8000 still results in the EADDRINUSE error.
2. As far as I can tell this is a regression in the latest version of ionic-app-scripts and the issue should not be closed.

[jthoms1]

This is not actually a regression in the ionic-app-scripts codebase. App-scripts has taken some responsibility from the ionic-cli. This fix should most likely be done within the CLI. Previously the CLI was would programmatically find open ports and attach to those. We will probably keep this functionality in the CLI but then pass the selected port to app-scripts.

This will problem you are seeing. I am going to move this issue to that codebase so that I can track it with the actual changes.

[jthoms1]

It appears that the Notification web socket port is set to use port 53703. This is never passed from the CLI. So we need to either update the CLI to start passing this port or app-scripts should identify a different port if this one is used.

[KarimMesallam]

In ionic-app-script's serve.ts, I've found that these three lines are defining the ports used

const DEV_LOGGER_DEFAULT_PORT = 53703;
const LIVE_RELOAD_DEFAULT_PORT = 35729;
const DEV_SERVER_DEFAULT_PORT = 8100;

To get this issue fixed and serve the second app, you have re-define the ports' variables, and you can do this by running the following command:

ionic serve --dev-logger-port 53704 --livereload-port 35730 --port 8200

As @jthoms1 have mentioned, it would be helpful if app-scripts identified different ports automatically if any of the ports was already used.

[rsoares21]

run this command :
ps -x | grep serve

then kill the process and start serve again.

good luck!

[sarahsga]

@KarimMesallam How to make this work with a specific platform (ios or android)? Your solution works only with ionic serve

[gianpaj]

While the workaround suggested by @KarimMesallam works when using ionic serve. Doesn't work for ionic run.

If you're developing a feature that requires a device and want to test your code on both Android and iOS (or an extra iPad, Android tablet, etc) at the same time, you can't. Push notifications are pretty tricky for example; this just makes it more painful.

$ ionic run android --consolelogs --debug --serverlogs --device --address 192.168.1.110 --livereload --dev-logger-port 53713 --port 8110 --livereload-port 35739

...
> ionic-app-scripts serve "--debug" "--device" "--address" "192.168.1.110" "--dev-logger-port" "53713" "--v2" "--runLivereload" "--isPlatformServe" "--port" "8110" "--consolelogs" "--serverlogs" "--livereload" "--livereload-port" "35739" "--iscordovaserve" "--nobrowser"

[09:49:36]  ionic-app-scripts 1.3.2
...
[09:49:52]  watch ready in 16.08 s MEM: 950.3MB
[09:49:52]  dev server running: http://192.168.1.110:8110/

Error: Unknown platforms: 53713

$ ionic info

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.2
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.1 Build version 8E1000a

[mohammadshamma]

@gianpaj I think the problem you're facing has to do with the spaces between the flags and the port values.

Try this instead:

$ ionic run android --consolelogs --debug --serverlogs --device --address=192.168.1.110 --
livereload --dev-logger-port=53713 --port=8110 --livereload-port=35739

[gianpaj]

Interesting @mohammadshamma . That worked 😂

These are my different versions now, just in case that was the culprit

$ ionic info

Your system information:

Cordova CLI: 7.0.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.1 Build version 8E1000a