Develop Status Server Port Configuration

[margr-ateles]

Description

I realize we're an edge case, but:

we run an nginx https proxy server in our development environment and use a FQDN (fully qualified domain name), let's pretend it's example.domain.com.

That means that the following results in problems for us during development:

gatsby/packages/gatsby/cache-dir/app.js

Line 39 in 17cdc22

`${window.location.protocol}//${window.location.hostname}:${services.developstatusserver.port}`

... because one can't use a port on a FQDN! 😮

The first instinct is: just set the port to something else and see if that works, and ...

  services.developstatusserver.port = ''
  const parentSocket = io(
    `${window.location.protocol}//${window.location.hostname}:${services.developstatusserver.port}`,
  )

ends up working, because this makes the requests upgrade to use websockets instead! 🎉

It is notable that we can NOT fix this in our proxy config, because the browser won't even send the request - DNS doesn't include ports...

---

Now, where is this coming from? Can we, instead of monkey patching this, set this via a config? 💭

Some digging later, we end up at
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/commands/develop.ts#L217

So at a glance, I could just set the port to '' with an environment variable, fantastic!

However, the implementation of getRandomPort is being clever, so that doesn't work - see
https://github.com/node-modules/detect-port/blob/master/lib/detect-port.js#L21

But there is still hope: we could set the port to an actual number - 443 specifically, as we're running https!
... alas, detect-port lives up to its name and detects that the port is already in use, resorting again to a random port.

---

Please help! 🙏 👍

[mxstbr]

Is there way to check whether window.location.hostname is a FQDN and not append the port in that case? Alternatively, is there a window.location property that represents the right thing in both cases?