Hello all (especially @DavidFrahm @eslindsey @philips @kevin-brotcke) 👋

I have implemented the --public-host option for the Ionic CLI which should resolve all issues here. This option provides a way for devs to specify which host the browser should use, regardless of which host the dev server is bound to.

Please help me test this PR by installing a test version of the Ionic CLI:

npm i -g @ionic/cli@6.2.0-testing.5

Couple things to note:

• --address is now named --host
• the default host is localhost, not 0.0.0.0
• use ionic serve --host=0.0.0.0 --public-host=<hostname> to test

Let me know what you think! 💙

I used:

ionic serve --port 8080 --address 0.0.0.0 -- --disableHostCheck true

@davidfrahm using a hostname will only work if the hostname is resolvable at the server and the client, which can be complicated if you’re not testing locally. But here are a few pointers:

If the container is penguin.linux.test, then you should be able to ping penguin.linux.test successfully. If you can’t, you need to add

127.0.0.1 penguin.linux.test

to your /etc/hosts on the server.

Additionally, if you are testing from non-local, then you need to resolve the name there as well, so you would need to add

<ip_addr_of_penguin> penguin.linux.test

to that machine’s /etc/hosts.

That’s a lot of work, so usually if you get to the point where you need that kind of testing, you’d add something like dnsmasq to take care of those details for you.

Regardless, the name you specify in --address MUST be resolvable on the server and client in order for everything to work.

Edit: I often see problems like this if a host name is set in /etc/hostname but doesn’t have a corresponding entry in /etc/hosts. The first sets the machine’s hostname, but that doesn’t automatically make it reachable or resolvable. For that, you need the second step. Doing one but not the other can lead to a plethora of mysterious Linux problems. Ionic is probably trying to use penguin.linux.test because that’s what you’ve told Linux this machine’s name is. But your DNS server (or hosts file if local) are unaware of that, so the name can’t be resolved.

It’s also worth noting that if you get to the point of using TLS/SSL/HTTPS, you will need to be able to resolve by name, because using the IP address won’t match the certificate and you’ll get security errors.

@eslindsey So actually the default for ionic serve is to spin up a server on all network interfaces (0.0.0.0), allowing testing from the network. localhost will resolve, but other hosts/addresses will resolve as well.

ionic serve --help does make this clear:

    By default, ionic serve boots up a development server on all network interfaces and prints the external address(es)
    on which your app is being served. It also broadcasts your app to the Ionic DevApp on your network. To disable the
    DevApp and bind to localhost, use --local.

I had the same problem, and adding the --address parameter did solve it for me.

Ok here’s how: create /vue.config.js relative to project root

module.exports = {
  devServer: {
    allowedHosts: 'all'
  }
}

docs: https://webpack.js.org/configuration/dev-server/#devserverallowedhosts

The default host for ionic serve is 0.0.0.0, which should be accessible on all interfaces, including the alias ‘localhost’. If your computer can’t resolve localhost, then the value needs to be changed.