feat(serve): add ability to set websocket client URL for wp-dev-server

[aegyed91]

When using inline mode and you're proxying dev-server, the inline client script does not always know where to connect to. It will try to guess the URL of the server based on window.location, but if that fails you'll need to use this.

Reference: devServer.public - CLI only

This is useful when your are using Vagrant or Docker and the client and host names and/or ports may differ.

Please merge this or #3381.

[clydin]

@tsm91 would your use case be covered by being able to set the live reload host and port individually?

[aegyed91]

@clydin i've tried several options in https://github.com/angular/angular-cli/blob/master/docs/documentation/serve.md

tried these:

> ng serve --host 0.0.0.0 --extract-css -lrh https://tsm.dev, got an error getaddrinfo ENOTFOUND https://tsm.dev -lrbu https://tsm.dev.

> ng serve --host 0.0.0.0 --extract-css -lrbu https://tsm.dev, no error but GET https://tsm.dev:4200/sockjs-node/info?t=1484416402324 net::ERR_CONNECTION_CLOSED in chrome console telling there is no socket connection. Because it is running on https://tsm.dev/sockjs-node/info?t=1484416962431 on port 80.

> ng serve --host 0.0.0.0 --extract-css -lrp 80, no good again, same issue as the above

> ng serve --host 0.0.0.0 --extract-css --port 80 --host tsm.dev no good again because Port 80 is already in use. error, furthermore cant specify protocol, it is running on https.

If you wonder why webpack dev server's socket thingy runs on https://tsm.dev/sockjs-node/info?t=1484416962431 instead of https://tsm.dev:4200/socks.... It is because the project is running on a vagrant box with a configured web-server (nginx). And we proxy each static file / socket connection request request to the webpack-dev-server runs on 127.0.0.1:4200 locally in the box.

upstream webpack_dev_server {
    server 127.0.0.1:4200;
}

server {
    listen 443 ssl default_server http2;
    ssl_certificate /workspace/cert/project.crt;
    ssl_certificate_key /workspace/cert/project.key;
    root /workspace/project;

    location ~ ^(/sockjs-node) {
      proxy_pass http://webpack_dev_server;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
    location ~* \.(eot|otf|ttf|woff|woff2|svg|jpg|gif|png|js|css)$ {
      proxy_pass http://webpack_dev_server;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }

    # ...

There is a guide about this on webpack's new site: https://webpack.js.org/guides/development-vagrant/#advanced-usage-with-nginx

So again, all i need is some kind of flag, mechanism to set webpack-dev-server/client?https://tsm.dev/

[clydin]

The options you tried don't actually function. There is a pending PR #3952 that will correct that.

Running this: ng serve --live-reload-host tsm.dev --live-reload-port 80 --ssl would result in webpack-dev-server/client?https://tsm.dev:80. SSL would be enabled but this mimics the behavior of webpack-dev-server.

[aegyed91]

@clydin yeah i followed one of the live reload options in the code and ran to a dead end very soon

i dont even ask why are they in the docs then... it is soooo confusing, but yes it would solve my issue then.

I also saw --live-reload-base-url https://tsm.dev:443, this should be fixed as well. I'd rather give 1 flag than 3.

ng serve --live-reload-host tsm.dev --live-reload-port 80 --ssl: Also it is confusing that i give the port 80 while it should be 443.

[clydin]

I'm working on cleaning up the options. There still some options leftover from before the webpack conversion.

My example should have been 443. Sorry about that.

[aegyed91]

Ahh i see, it is a big chaos. 💃

I'm working on cleaning up the options.

where?

is there anything i can help you out with regarding this issue? i could cleanup the networking related flags if that is a blocker for this PR

being able to tell webpack-dev-server on which url to connect to the socket server is a must have feature

@clydin @hansl @filipesilva @elclanrs

[filipesilva]

Superseded by #3952 I believe.

[elclanrs]

I'm fine with either PR (#3381, #3952), as long as I can configure these options. I don't have a preference for one vs two separate options. There may be a case where passing the full url may be useful, but I can't think of any...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}