Add option --host to development server, currently only localhost

[kwmiebach]

🙋 feature request

The dev server should be able to listen on a non localhost interface. There should be a --host option to allow setting a different IP or 0.0.0.0 for all interfaces.

🤔 Expected Behavior

When you start a dev server with parcel index.html --host 10.1.1.10 the dev server should listen on the 10.1.1.10 interface. (I guess also the websocket interface has to be changed in this case.)

When you start a dev server with parcel index.html --host 0.0.0.0 the dev server should listen on all interfaces.

When you omit the --host option, the dev server should only serve on localhost, like before. This is important for security reasons and backwards compatibility.

😯 Current Behavior

No --host option is possible and the dev server always listens on localhost. Some people believe it listens on 0.0.0.0 (which means 'listen on all interfaces/IPs') but this is not true. And it would be insecure.

💁 Possible Solution

Implement a --host option and pass its value to the http server. Probably in this file as second parameter after the port parameter:

parcel/src/Server.js

Line 103 in 3988ffc

server.listen(freePort);

I believe this needs also to be changed in the websocket server implementation:

https://github.com/parcel-bundler/parcel/blob/master/src/HMRServer.js

🔦 Context

You won't need this if you only develop on your laptop / local machine.

This can be helpful if the development machine is a different machine in the same network, like a development VM. And there are special setups where you need it, see examples below.

💻 Examples

There can be situations like with vagrant or docker, or on continous integration servers or hosted web editors where you need to set a different interface. This has been mentioned in some other issues.

Another common situation is, when you are testing with a real phone as the client. Or if you develop on a lets say linux machine and want to see it live reloading on multiple parallel heads, like a windows machine with IE/Edge, a Mac, etc.

Many development servers have it:

Websocket

https://github.com/webpack/webpack-dev-server/blob/master/examples/cli/host-and-port/README.md#ipv4

npm run webpack-dev-server -- --open --port 5000 --host 0.0.0.0

Angular Cli

https://github.com/angular/angular-cli/#usage

ng serve --host 0.0.0.0 --port 4201

Vue.js CLI

https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#serve

vue-cli-service serve --host 0.0.0.0

[kwmiebach]

reference #278
reference #924

reference #276

[victorandcode]

Hello, I'll be working on this issue this next couple of days. I'll be fixing some stuff in my PR and it should be ready.

[victorandcode]

Ok, the pull request should be ready :) and only requires approval PR

[victorandcode]

Ok, in the end I've closed the PR without merge given that the option --hmr-hostname seems to already do that this issue requests. Discussion

[devongovett]

Closing. The dev server already listens on all interfaces by default.

[dumptyd]

I ran into this too and apparently I wasn't able to access the server from another device because port 1234 was not open on the host machine. So specifying 8080 did the trick. Posting here in case anyone else runs into this.

[inuwan]

I'd like to reopen this issue. The hmr-hostname option does not satisfy this request. For the purposes of CORS, I'd like to specify a specific host name that matches the access-control-allow-origin domain.

[pke]

@devongovett

Closing. The dev server already listens on all interfaces by default.

That does not seem to be true. It listens on localhost only by default. It even prints that to the console.
Ok the code just always prints out "localhost" not the real interface it bound too. Confusing.

[cloudwizard]

./node_modules/.bin/vue-cli-service serve --host 0.0.0.0 --port 3000

I get "Invalid Host header"

I need to disablehostcheck
disableHostCheck: true flag
webpack/webpack-dev-server#882

Is there a way to set it on the command line?

[laurencefass]

subscribing. this is major obstacle to running vue in a docker container.

[queengooborg]

I think this issue should be reopened. When running Parcel normally, it states the server is running on http://localhost:1234. However, whenever I try to connect, I can never get a connection to the server on my browser. I have to explicitly state 0.0.0.0 to get the server bound to it and get a working connection.