Enable custom sockjs pathname for hot reloading server.

Created by: heygrady

Fixes https://github.com/facebook/create-react-app/issues/7597 See also https://github.com/dmile/create-react-app/commit/d86b05e9d327b368f664f6b9846ecac9806bca70 and https://github.com/facebook/create-react-app/pull/7444#issuecomment-517914637

Enables setting the sockPath option for the webpack-dev-server using a new WDS_SOCKET_PATH environment variable. This env controls the websocket connection pathname used by the hot reloading client/server.

Primary use-case would be starting a development server for multiple projects simultaneously. It's already possible to specify a PORT for the development server. When proxying multiple projects behind a single domain it is also necessary to customize the sockPath.

Why?

There are many valid reasons to develop locally with a custom hostname. It is also common in real-life productions apps to proxy to different apps based on pathname.

Imagine that we are running a local nginx proxy at local.example.com like so:

• http://local.example.com/project-a -> localhost:3001
• http://local.example.com/project-b -> localhost:3002

# start two projects with different ports and different sock paths
$ PORT=3001 WDS_SOCKET_PATH=/sockjs-node/project-a yarn start
$ PORT=3002 WDS_SOCKET_PATH=/sockjs-node/project-b yarn start

Of course we also need to proxy the sockjs pathnames with nginx as well.

This rig enables an app to be developed similarly to how it will appear in production.