ionic serve --lab always tries to access localhost

[t91710]

Description:
I run ionic lab on a dev server on my local network. When upgrading to latest ionic-cli version it's no longer possible to connect from ionic-lab to the angular dev server since it always tries to connect to localhost instead of the address of the server. The problem is that localhost is hard coded in

ionic-cli/packages/ionic/src/lib/serve.ts

Line 715 in 44b0918

const url = `${serveDetails.protocol}://localhost:${serveDetails.port}`;

It should probably look at the address of the command which ionic serve is started with, and if there is something else than 0.0.0.0 (which is also default), this address should be used when starting ionic-lab.

Steps to Reproduce:

1. Get two computers
2. Get the ip of the first machine, for example 192.168.1.1
3. Run ionic serve --address 192.168.1.1 --lab --lab-host 0.0.0.0 -- --disableHostCheck
4. From your other computer, try to access 192.168.1.1:8200 (ionic lab) -> Does not work, because it tries to connect to localhost:8100 instead of 192.168.1.1:8100

My ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v10.15.3 (/usr/bin/node)
   npm    : 6.4.1
   OS     : Linux 3.10

Other Information:
Should be easy to just use the correct variable from the ionic serve command on this row (

ionic-cli/packages/ionic/src/lib/serve.ts

Line 715 in 44b0918

const url = `${serveDetails.protocol}://localhost:${serveDetails.port}`;

) instead of hardcoded localhost-string. The ionic-lab bin already supports this, I have tested to do the change locally.

[imhoffd]

I never thought someone would do what you're doing 😆

No reason this can't be fixed this up, though!

[t91710]

I understand it's not a very common thing to do. But I do it this way to please my project managers. They want to be able to look at the app progress, and I don't want to show it every time 😄

[jcalvezar]

Hi, well, I'm in a similar situation, because I run Ionic in a VirtualBox, and access ionic-lab from outside, so, I get the ionic-lab trying to open the iframes from localhost, and it fails.

Maybe if you change the line 715 in ionic-cli/packages/ionic/src/lib/serve.ts from:

const url = ${serveDetails.protocol}://localhost:${serveDetails.port};

to

const url = ${serveDetails.protocol}://{labDetails.address}:${serveDetails.port};

can solve the problem, i guess

[ciekawy]

I think I need the same or similar without --lab. My case is a bit different though.

To be able to use FB login I am using ionic serve --cordova --platform browser and I need to use --ssl. To have a secure connection I created as self signed certs for some dev.test host pointing to 127.0.0.1. Now I need all this to spawn the browser pointing to https://dev.test:8100/ which is not possible due to hardcoded localhost.

so probably instead of using directly labDetails.address we may need to consider also serveDetails.host dependning whether --lab has been passed

[liamdebeasi]

Hi everyone,

We recently deprecated Ionic Labs in favor of using the built-in browser tools for mobile emulation. These tools more accurately simulate a mobile environment than Ionic Labs does. We have documentation for getting set up with the browser dev tools on our documentation website: https://ionicframework.com/docs/developing/previewing

I am going to close this, but let me know if there are any questions.