Enable custom sockjs pathname for hot reloading server.

[heygrady]

Fixes #7597
See also https://github.com/dmile/create-react-app/commit/d86b05e9d327b368f664f6b9846ecac9806bca70 and #7444 (comment)

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.

[mrmckeb]

Thanks for this, it looks good. Only a few minor suggestions from me!

[robertvansteen]

Perhaps we should add support for configuring the other values (port, hostname) here as well? That way if you serve the app over a different hostname (e.g. myapp.localhost) it can still connect with localhost:3000.

[mrmckeb]

@heygrady I like @rovansteen's suggestion. Do you think you could get that in here?

Something happened to the CI, sorry about that. I know it's working better today, but still needs love.

[robertvansteen]

This looks good to me if we can get the build green. Are the issues with the CI resolved now?

[heygrady]

rebased and force pushed

[heygrady]

Oh, needs to have more recent version of webpack-dev-server.

[heygrady]

The other options (sockPort, sockHost) that @rovansteen wanted aren't available in version 3.2.0 of webpack-dev-server that react-scripts is using. They were added in version 3.4.0

I went ahead and upgraded to version 3.9.0.

[heygrady]

The kitchen sink tests are failing because of a cryptic error, TypeError: Cannot read property '_cookieJar' of null. This may be related to upgrade of webpack dev server (but it's not clear how). There are some hints that this is a JSDOM issue (jestjs/jest#8613). It's not easy to run the kitchen sink tests locally to determine what might fix it.

[heygrady]

@mrmckeb I'm curious about next steps. I don't suspect that the CI kitchensink failures are directly related to this PR. I run a fork where I've had the upgraded webpack-dev-server for quite a while and I don't have any issues.

[matejstrasek]

Would be wonderful to have this merged. We are running multiple projects simultaneously and this PR would make life much easier.

[twschiller]

@matejstrasek I put together a gitpkg of this PR at https://github.com/twschiller/create-react-app/tree/react-scripts-v3.2.0-gitpkg. Add it to your packages.json like so:

"react-scripts": "git+https://github.com/twschiller/create-react-app.git#react-scripts-v3.2.0-gitpkg",

[heygrady]

Related: #7988

I experimented with rebasing this branch on top of #7988 and that worked great. This branch is block by that branch.

[heygrady]

Rebased. All tests should be passing now.

[shenst1]

Was wondering if this is still going to be pushed through now that it has been approved? Looks like the milestone has passed

[runofthemillgeek]

Would love to see this merged. We ran into this while we were migrating our legacy codebase incrementally over to React and we're including the React bundle in our main application while running two distinct dev servers. In this scenario, we need to override the defaults to get HMR to work.

@heygrady any idea why builds are failing? I'm unable to see the logs on Azure Pipelines.

[andriijas]

Thanks for your patience everyone!

Please note that env var configuration might be changed to config file in the future.