ionic-team / ionic-app-scripts

App Build Scripts for Ionic Projects
http://ionicframework.com/
MIT License
609 stars 300 forks source link

Ionic Serve with Codenvy livereload port mapping issue #1524

Open doonfrs opened 5 years ago

doonfrs commented 5 years ago

Short description of the problem:

Codenvy/Eclipse che does not expose the same port being used by the application. They provide a feature called 'server' so you can provide the listening port, then you will get a random port for external workspace access. Now we can use ionic serve --livereload-port 8001 --port 8002 and map the ports 8001, 8002 in codenvy servers tab to get new ports. All will works fine except ionic serve will write the liver reload port in the produced index.html file. ionic run browser will works fine using new port like http://***IP**:32233 instead of http://***IP**:8000 ionic run browser -l --livereload-port 8002 will failed because the port 8002 (for ex) is written in the index.html file and script will get timeout for not being able to access a port, live reload will fail.

What behavior are you expecting?

Being able to specify an alias port for livereload or being able to provide the live reload url. I tried --livereload-url but it does not seems to be designed for this scenario, passing this variable will ignore the rest of variables like --port and will run the script without building.

Steps to reproduce:

  1. Create Codenvy workspace
  2. Add servers for ports 8002 , 8003 , 8004
  3. ionic serve --port 8002 --dev-logger-port 8003 --livereload-port 8004
  4. Access the served url with new port provided by codenvy server (http://**IP**:32323)
  5. Page keep waiting and network timeout for accessing http://**IP**:8004 url (live reload) while the exposed port will be http://**IP**:32324 (for ex.)
    ionic cordova run browser --livereload --port 8002 --dev-logger-port 8003 --livereload-port 8004 
    Generated Script in index.html body:
    <script src="//192.99.88.134:**8004**/livereload.js?snipver=1" async="" defer=""></script>

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

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) https://codenvy.com/docs/user-guide/previews/index.html

doonfrs commented 5 years ago

As fast solution, I inected the livereload URL in the index.html page body, so the generated one will failed, mine will work.

<!-- The following will fail to load-->
<script src="http://**IP**:32941/livereload.js"></script>

<!-- The following will success to load-->
<script src="http://**IP**:32941/livereload.js"></script>
</body>

The following code will be better (does not work in production)

<script>
    if(window.IonicDevServer)
    {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.onload = function(){
            // remote script has loaded
        };
        script.src = 'http://**IP**:32941/livereload.js';
        document.getElementsByTagName('head')[0].appendChild(script);        
    }
</script>